/* Cattle Calf Journal — scoped under .calf-app */

[x-cloak] { display: none !important; }

.calf-app {
  --cj-space: 16px;
  --cj-gap: 12px;
  --cj-radius: 10px;
  --cj-radius-lg: 14px;
  --cj-border: 1px solid var(--color-content-border, #e0e0e0);
  --cj-border-strong: 1px solid var(--color-content-border, #c8c8c8);
  --cj-primary: var(--color-content-primary, #2a5934);
  --cj-primary-soft: color-mix(in srgb, var(--cj-primary) 10%, #fff);
  --cj-bg: var(--color-content-bg-alt, #fff);
  --cj-bg-muted: #fafaf7;
  --cj-text: var(--color-content-text, #222);
  --cj-text-alt: var(--color-content-text-alt, #666);
  --cj-error: #c0392b;
  --cj-warn-bg: #fef6e0;
  --cj-warn-border: #e9c97a;

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cj-gap);
  padding: var(--cj-space);
  background: var(--cj-bg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--cj-text);
}

@media (min-width: 960px) {
  .calf-app:not(.calf-app--public):not(.calf-app--account) {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  }
  .calf-app:not(.calf-app--public):not(.calf-app--account) .calf-app__sidebar {
    grid-column: 2;
    grid-row: 1 / span 5;
  }
}

/* ============================================================
   GUEST BANNER (public/shortcode mode only)
   ============================================================ */
.calf-guest-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cj-gap);
  padding: var(--cj-space);
  background: var(--cj-warn-bg);
  border: 1px solid var(--cj-warn-border);
  border-radius: var(--cj-radius-lg);
  margin-bottom: var(--cj-space);
}
.calf-guest-banner__body {
  flex: 1 1 280px;
}
.calf-guest-banner__title {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a6d00;
  margin-bottom: 4px;
}
.calf-guest-banner__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #5a4500;
}
.calf-guest-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.calf-guest-banner__cta {
  display: inline-block;
  padding: 10px 20px;
  background: var(--cj-primary);
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: var(--cj-radius);
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
}
.calf-guest-banner__cta:hover,
.calf-guest-banner__cta:focus-visible {
  background: var(--cj-primary);
  filter: brightness(0.95);
}
.calf-guest-banner__link {
  display: inline-block;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--cj-text-alt);
  text-decoration: underline;
  cursor: pointer;
}
.calf-guest-banner__link:hover,
.calf-guest-banner__link:focus-visible {
  color: var(--cj-text);
}

/* ============================================================
   TABS
   ============================================================ */
.calf-app__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: var(--cj-border);
  margin-bottom: var(--cj-space);
}
.calf-app__tabs button {
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--cj-text-alt);
  min-height: 44px;
  font-family: inherit;
  font-size: 15px;
}
.calf-app__tabs button.active {
  color: var(--cj-primary);
  border-bottom: 2px solid var(--cj-primary);
}
.calf-app__tabs .badge {
  background: var(--cj-primary);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 12px;
}

/* ============================================================
   FORM — redesigned for field-first quick entry
   ============================================================ */
.calf-form {
  display: grid;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 80px; /* reserve space under sticky CTA */
}

.calf-form__header {
  text-align: left;
}
.calf-form__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--cj-text);
}
.calf-form__hint {
  margin: 0;
  font-size: 14px;
  color: var(--cj-text-alt);
  line-height: 1.4;
}

.calf-form__section {
  border: none;
  padding: 0;
  margin: 0;
}
.calf-form__legend {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 600;
  font-size: 15px;
  color: var(--cj-text);
  padding: 0;
  margin-bottom: 10px;
}
.calf-form__required {
  color: var(--cj-error);
  font-weight: 700;
}
.calf-form__error {
  margin: 8px 0 0;
  color: var(--cj-error);
  font-size: 14px;
  font-weight: 500;
}

/* Sex card buttons */
.calf-form__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.calf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  border: 2px solid var(--cj-border-strong);
  border-radius: var(--cj-radius-lg);
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  min-height: 96px;
}
.calf-card:hover {
  border-color: var(--cj-primary);
}
.calf-card:active {
  transform: scale(0.98);
}
.calf-card--active {
  border-color: var(--cj-primary);
  background: var(--cj-primary-soft);
}
.calf-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.calf-card__icon {
  font-size: 32px;
  line-height: 1;
  color: var(--cj-primary);
}
.calf-card__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--cj-text);
}

/* Difficulty radio list */
.calf-form__radio-list {
  display: grid;
  gap: 8px;
}
.calf-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--cj-border-strong);
  border-radius: var(--cj-radius);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 48px;
}
.calf-radio:hover {
  border-color: var(--cj-primary);
}
.calf-radio--active {
  border-color: var(--cj-primary);
  background: var(--cj-primary-soft);
}
.calf-radio__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.calf-radio__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cj-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.calf-radio__label {
  font-size: 15px;
  color: var(--cj-text);
}

/* Segmented control */
.calf-segment {
  --seg-border: var(--cj-primary);
  display: flex;
  border: 2px solid var(--seg-border);
  border-radius: var(--cj-radius);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
/* Sex: dynamic border color based on selection */
.calf-segment--sex { --seg-border: #bbb; }
.calf-segment--bull { --seg-border: #5b9bd5; }
.calf-segment--heifer { --seg-border: #d4779b; }
.calf-segment__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: #fff;
  color: var(--cj-text);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.calf-segment__item + .calf-segment__item {
  border-left: 2px solid var(--seg-border);
}
.calf-segment__item:hover {
  background: #f5f5f5;
}
/* Sex-specific active states: tinted bg + dark text */
.calf-segment__item--bull.calf-segment__item--active {
  background: #dbeaf7;
  color: #2c6fad;
  font-weight: 600;
}
.calf-segment__item--heifer.calf-segment__item--active {
  background: #f8e1eb;
  color: #a04d6e;
  font-weight: 600;
}
/* Generic active (date, etc.) */
.calf-segment__item--active:not(.calf-segment__item--bull):not(.calf-segment__item--heifer) {
  background: var(--cj-primary);
  color: #fff;
  font-weight: 600;
}
.calf-segment__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.calf-segment__icon {
  font-size: 18px;
  line-height: 1;
}
.calf-segment__text {
  font-size: inherit;
}

/* Date segment: inline date input replaces "Другая дата" button */
.calf-segment--date {
  /* Fixed height — prevents jump when switching to date input */
  height: 48px;
}
.calf-segment--date > .calf-segment__item {
  /* "Сегодня"/"Вчера": fixed 30%, never change on date-input swap */
  flex: 0 0 30%;
  /* Fill fixed height of parent */
  height: 100%;
  box-sizing: border-box;
}
.calf-segment--date > .calf-segment__item--other-date,
.calf-segment--date > .calf-segment__item--date-input {
  /* Third slot takes remaining 40% */
  flex: 1 1 auto;
  /* Explicit border-left: Alpine x-if <template> breaks CSS + sibling selector */
  border-left: 2px solid var(--seg-border);
}
.calf-segment__item--date-input {
  background: #edf5ef;
  padding: 0;
  cursor: default;
  min-width: 0;
  overflow: hidden;
}
.calf-segment__date-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  /* Safari при appearance:none убирает нативный calendar-picker-indicator,
     поэтому рисуем SVG-иконку календаря через background-image.
     Важно: Impreza (style.min.css) задаёт на `input:not([type="submit"])`
     shorthand `background: var(--inputs-background, transparent)` и грузится
     ПОСЛЕ нашего CSS с той же specificity (0-1-1) — source order выигрывает,
     background-image обнуляется. Поэтому здесь обязательны `!important` на
     background-image и всех связанных свойствах, иначе иконки не будет.
     Data URL — с `;charset=utf-8,` и URL-encoded `<>`/пробелами: `;utf8,`
     с голыми угловыми скобками некоторые парсеры молча выкидывают. */
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Crect%20x='2'%20y='3.25'%20width='12'%20height='10.5'%20rx='1.5'%20stroke='%232a5934'%20stroke-width='1.4'/%3E%3Cpath%20d='M2%206.5h12'%20stroke='%232a5934'%20stroke-width='1.4'/%3E%3Cpath%20d='M5%202.25v2M11%202.25v2'%20stroke='%232a5934'%20stroke-width='1.4'%20stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px 16px !important;
  padding: 8px 30px 8px 10px !important;
  font-size: inherit;
  font-family: inherit;
  color: var(--cj-primary);
  font-weight: 600;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  line-height: normal !important;
  min-height: 0 !important;
}
/* В Chrome нативный picker-indicator остаётся видимым — прячем его,
   чтобы не было двух иконок сразу (наша SVG + родной треугольник). */
.calf-segment__date-field::-webkit-calendar-picker-indicator {
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.calf-segment__date-field:focus {
  /* background-color отдельно, чтобы не затереть background-image с иконкой */
  background-color: rgba(42, 89, 52, 0.08) !important;
  box-shadow: inset 0 0 0 2px var(--cj-primary);
}

/* Color scale (difficulty) */
.calf-scale {
  --scale-1: #27ae60;
  --scale-2: #8bc34a;
  --scale-3: #f39c12;
  --scale-4: #e67e22;
  --scale-5: #c0392b;
  display: flex;
  border-radius: var(--cj-radius);
  overflow: hidden;
  border: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
}
.calf-scale__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  background: #f5f5f5;
  color: #555;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  min-height: 40px;
  transition: background 0.15s ease, color 0.15s ease;
}
.calf-scale__item + .calf-scale__item {
  border-left: 1px solid #ddd;
}
.calf-scale__item:hover {
  background: #eee;
}
.calf-scale__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.calf-scale__number {
  pointer-events: none;
}
/* Active states — color per level */
.calf-scale__item--1.calf-scale__item--active { background: var(--scale-1); color: #fff; border-color: var(--scale-1); }
.calf-scale__item--2.calf-scale__item--active { background: var(--scale-2); color: #fff; border-color: var(--scale-2); }
.calf-scale__item--3.calf-scale__item--active { background: var(--scale-3); color: #fff; border-color: var(--scale-3); }
.calf-scale__item--4.calf-scale__item--active { background: var(--scale-4); color: #fff; border-color: var(--scale-4); }
.calf-scale__item--5.calf-scale__item--active { background: var(--scale-5); color: #fff; border-color: var(--scale-5); }
.calf-scale__item--active:hover { filter: brightness(0.95); }
/* Label below the scale */
.calf-scale__label {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  min-height: 20px;
}
.calf-scale__label--1 { color: var(--scale-1); }
.calf-scale__label--2 { color: var(--scale-2); }
.calf-scale__label--3 { color: var(--scale-3); }
.calf-scale__label--4 { color: var(--scale-4); }
.calf-scale__label--5 { color: var(--scale-5); }

/* Date pills */
.calf-form__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--cj-border-strong);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--cj-text);
  min-height: 40px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.calf-pill:hover {
  border-color: var(--cj-primary);
}
.calf-pill--active {
  border-color: var(--cj-primary);
  background: var(--cj-primary);
  color: #fff;
}
.calf-pill__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom date picker (revealed when "Другая дата" pill is active) */
.calf-form__custom-date {
  margin-top: 10px;
}
.calf-form__custom-date-input {
  width: 100%;
  max-width: 260px;
  padding: 10px 12px;
  border: var(--cj-border-strong);
  border-radius: var(--cj-radius);
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.calf-form__custom-date-input:focus {
  outline: none;
  border-color: var(--cj-primary);
  box-shadow: 0 0 0 3px var(--cj-primary-soft);
}

/* Advanced (collapsible) */
.calf-form__advanced {
  border: 1px dashed var(--cj-border-strong);
  border-radius: var(--cj-radius);
  background: var(--cj-bg-muted);
  padding: 0;
}
.calf-form__advanced-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--cj-text);
  list-style: none;
  user-select: none;
}
.calf-form__advanced-summary::-webkit-details-marker {
  display: none;
}
.calf-form__advanced-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--cj-primary);
  font-size: 14px;
}
.calf-form__advanced[open] .calf-form__advanced-chevron {
  transform: rotate(90deg);
}
.calf-form__advanced-text {
  font-size: 15px;
}
.calf-form__advanced-meta {
  font-size: 13px;
  color: var(--cj-text-alt);
  font-weight: 400;
  margin-left: auto;
}
.calf-form__advanced-body {
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.calf-form__advanced-body .calf-field:has(select),
.calf-form__advanced-body .calf-field:has(textarea) {
  grid-column: 1 / -1;
}

/* Individual field (text/number/select/textarea) */
.calf-field {
  display: grid;
  gap: 4px;
}
.calf-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-text);
}
.calf-field__hint {
  font-size: 12px;
  color: var(--cj-text-alt);
  margin-bottom: 2px;
}
.calf-field__info {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--cj-text-alt, #999);
  cursor: help;
  vertical-align: middle;
}
.calf-field__tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}
.calf-field__info:hover .calf-field__tooltip,
.calf-field__info:focus .calf-field__tooltip {
  display: block;
}
.calf-field input,
.calf-field select,
.calf-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: var(--cj-border-strong);
  border-radius: var(--cj-radius);
  font-size: 16px; /* 16px prevents iOS auto-zoom */
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.calf-field input:focus,
.calf-field select:focus,
.calf-field textarea:focus {
  outline: none;
  border-color: var(--cj-primary);
  box-shadow: 0 0 0 3px var(--cj-primary-soft);
}

/* ── Floating labels (advanced fields) ──────── */
.calf-field--floating {
  position: relative;
  display: block;
}
.calf-field--floating .calf-field__label {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 400;
  color: var(--cj-text-alt);
  pointer-events: none;
  transition: top 0.15s ease, transform 0.15s ease, color 0.15s ease, font-size 0.15s ease;
  transform-origin: left top;
  z-index: 1;
  line-height: 1.2;
  white-space: nowrap;
}
.calf-field--floating .calf-field__info {
  pointer-events: auto;
}
.calf-field--floating .calf-field__info svg {
  width: 12px;
  height: 12px;
}
/* Textarea: label near top, not centered */
.calf-field--floating:has(textarea) .calf-field__label {
  top: 12px;
  transform: none;
}
/* Override Impreza input[type] rules: padding, line-height, background */
.calf-field--floating input,
.calf-field--floating select,
.calf-field--floating textarea {
  background-color: #fff !important;
  background: #fff !important;
  line-height: 1.3 !important;
}
.calf-field--floating input {
  padding: 22px 12px 6px !important;
}
.calf-field--floating select {
  padding: 18px 28px 4px 12px !important;
}
.calf-field--floating textarea {
  padding: 22px 12px 8px !important;
}
/* Placeholder: smaller font, hidden in rest, visible on focus */
.calf-field--floating input::placeholder,
.calf-field--floating textarea::placeholder {
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.calf-field--floating input:focus::placeholder,
.calf-field--floating textarea:focus::placeholder {
  opacity: 0.5;
  transition-delay: 0.1s;
}
/* Float up: focus, filled input/textarea, or select (always floated) */
.calf-field--floating:focus-within .calf-field__label,
.calf-field--floating:has(input:not(:placeholder-shown)) .calf-field__label,
.calf-field--floating:has(textarea:not(:placeholder-shown)) .calf-field__label,
.calf-field--floating:has(select) .calf-field__label {
  top: 4px;
  font-size: 10px;
  font-weight: 600;
  transform: none;
  color: var(--cj-text);
}
.calf-field--floating:focus-within .calf-field__label {
  color: var(--cj-primary);
}

/* Sticky submit bar */
.calf-form__submit-bar {
  position: sticky;
  bottom: 0;
  margin: 0 -16px -16px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--cj-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: var(--cj-border);
  z-index: 10;
}
.calf-form__submit {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background-color: var(--cj-primary);
  color: #fff;
  border: none;
  border-radius: var(--cj-radius);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  font-family: inherit;
  cursor: pointer;
  min-height: 52px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  transition: opacity 0.15s ease;
}
.calf-form__submit:hover {
  opacity: 0.92;
}
.calf-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   HISTORY TABLE — expandable rows, sortable columns
   ============================================================ */
.calf-history__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.calf-history__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calf-history__table th,
.calf-history__table td {
  padding: 9px 6px;
  text-align: left;
  border-bottom: 1px solid #f0eeea;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calf-history__table thead th {
  font-weight: 600;
  font-size: 11px;
  color: #999;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8e8e8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.calf-history__table .empty {
  text-align: center;
  color: var(--cj-text-alt);
  padding: 40px 0;
  white-space: normal;
}

/* ── Column widths (desktop default) ── */
.cj-col-num   { width: 32px; text-align: center; }
.cj-col-date  { width: 72px; }
.cj-col-id    { width: 18%; }
.cj-col-breed { width: 18%; }
.cj-col-sex   { width: 36px; text-align: center; }
.cj-col-wt    { width: 44px; text-align: right; }
.cj-col-diff  { width: 32px; text-align: center; }
.cj-col-cmt   { width: 28px; text-align: center; }
.cj-col-exp   { width: 24px; text-align: center; }
td.cj-col-num { color: #bbb; }

/* ── Sortable headers ── */
.cj-sortable { cursor: pointer; user-select: none; }
.cj-sortable:hover { color: var(--cj-primary, #2C4A2E); }
.cj-si { font-size: 9px; opacity: 0.3; margin-left: 1px; }
.cj-sortable:hover .cj-si { opacity: 0.8; }

/* ── Expandable row ── */
.cj-row { cursor: pointer; }
.cj-row:hover td { background: #fafaf7; }
.cj-row--expanded td { background: #fafaf7; border-bottom-color: transparent; }

/* ── Sex colors ── */
.cj-sex-m { color: #5b9bd5; font-weight: 600; }
.cj-sex-f { color: #d4779b; font-weight: 600; }

/* ── Difficulty dots ── */
.cj-diff-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.cj-diff-dot--1 { background: #27ae60; }
.cj-diff-dot--2 { background: #8bc34a; }
.cj-diff-dot--3 { background: #f39c12; }
.cj-diff-dot--4 { background: #e67e22; }
.cj-diff-dot--5 { background: #c0392b; }

/* ── Comment icon ── */
.cj-cmt-on { color: var(--cj-primary, #2C4A2E); }
.cj-cmt-off { color: #ddd; }

/* ── Expand chevron ── */
.cj-chv {
  display: inline-block;
  font-size: 11px;
  color: #ccc;
  transition: transform 0.15s ease, color 0.15s ease;
}
.cj-chv--open { transform: rotate(90deg); color: var(--cj-primary, #2C4A2E); }

/* ── Detail row ── */
.cj-detail-row td {
  padding: 0 !important;
  background: #fafaf7;
  border-bottom: 1px solid #e8e8e8;
}
.cj-detail {
  padding: 8px 10px 10px 40px;
  font-size: 12px;
  color: #555;
}
.cj-detail__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.cj-detail__label {
  display: block;
  font-weight: 600;
  color: #aaa;
  font-size: 11px;
}
.cj-detail__value {
  display: block;
  margin-bottom: 2px;
}
.cj-detail__comment {
  margin-top: 6px;
  padding: 6px 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eae8e3;
  font-style: italic;
  line-height: 1.4;
  color: #555;
  white-space: normal;
}
.cj-detail__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.cj-detail__delete {
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #c0392b;
  cursor: pointer;
  font-family: inherit;
}
.cj-detail__delete:hover {
  background: #fff5f5;
  border-color: #c0392b;
}

/* ── Responsive visibility ── */
.cj-mb-only { display: none; }

/* ── Toolbar ── */
.calf-history__toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: var(--cj-gap);
  flex-wrap: wrap;
}
.calf-history__toolbar input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border: var(--cj-border);
  border-radius: var(--cj-radius);
  font-size: 16px;
  background-color: #fff;
  line-height: 1.3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.calf-history__toolbar input[type="search"]:focus,
.calf-history__toolbar input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--cj-primary);
  box-shadow: 0 0 0 3px var(--cj-primary-soft);
}
.calf-history__toolbar input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.calf-history__toolbar button {
  padding: 10px 16px;
  border: var(--cj-border);
  background: #fff;
  border-radius: var(--cj-radius);
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.calf-history__toolbar button:focus,
.calf-history__toolbar button:focus-visible {
  outline: none;
  border-color: var(--cj-primary);
  box-shadow: 0 0 0 3px var(--cj-primary-soft);
}
.calf-history__toolbar .danger {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}

/* ============================================================
   SETTINGS — sidebar layout (Option C)
   ============================================================ */
.cj-settings {
  background: var(--cj-bg);
  border: var(--cj-border);
  border-radius: var(--cj-radius-lg);
  overflow: hidden;
  container-type: inline-size;
}
.cj-settings__layout {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 640px) {
  .cj-settings__layout { grid-template-columns: 200px 1fr; }
}

/* Nav column */
.cj-settings__nav {
  background: #f5f3ee;
  padding: 10px 8px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
}
@container (min-width: 640px) {
  .cj-settings__nav {
    flex-direction: column;
    border-right: var(--cj-border);
    padding: 14px 8px;
    overflow-x: visible;
  }
}
.cj-settings__nav-group {
  display: none;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cj-text-alt);
  padding: 10px 12px 4px;
}
@container (min-width: 640px) {
  .cj-settings__nav-group { display: block; }
}
.cj-settings__nav button {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--cj-text-alt);
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.cj-settings__nav button:hover { background: rgba(44, 74, 46, 0.06); }
.cj-settings__nav button.is-active {
  background: var(--cj-bg);
  color: var(--cj-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.cj-settings__nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: rgba(44, 74, 46, 0.08);
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
}

/* Content column */
.cj-settings__content { padding: 22px; min-height: 360px; }
.cj-settings__section { display: flex; flex-direction: column; gap: 12px; }
.cj-settings__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cj-text);
}
.cj-settings__desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--cj-text-alt);
  line-height: 1.5;
}
.cj-settings__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cj-settings__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cj-text-alt);
}
.cj-settings__field input {
  padding: 9px 12px;
  border: var(--cj-border);
  border-radius: var(--cj-radius);
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--cj-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cj-settings__field input:focus {
  border-color: var(--cj-primary);
  box-shadow: 0 0 0 3px var(--cj-primary-soft);
}
.cj-settings__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
}
.cj-settings__check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cj-primary); }

.cj-settings__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.cj-settings__save {
  appearance: none;
  background: var(--cj-primary);
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: var(--cj-radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: opacity .15s ease;
}
.cj-settings__save:disabled { opacity: 0.6; cursor: not-allowed; }
.cj-settings__message { font-size: 13px; color: var(--cj-primary); }

/* Breeds chips */
.cj-settings__breeds {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cj-settings__breeds li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--cj-primary-soft);
  color: var(--cj-primary);
  border-radius: 8px;
  font-size: 13px;
}
.cj-settings__breeds li button {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--cj-primary);
  padding: 0 2px;
}
.cj-settings__breeds-empty {
  color: var(--cj-text-alt);
  font-size: 13px;
  font-style: italic;
}
.cj-settings__breed-add {
  display: flex;
  gap: 6px;
  max-width: 360px;
}
.cj-settings__breed-add input {
  flex: 1;
  padding: 9px 12px;
  border: var(--cj-border);
  border-radius: var(--cj-radius);
  font: inherit;
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cj-settings__breed-add input:focus {
  border-color: var(--cj-primary);
  box-shadow: 0 0 0 3px var(--cj-primary-soft);
}
.cj-settings__breed-add button {
  appearance: none;
  background: var(--cj-primary);
  color: #fff;
  border: 0;
  border-radius: var(--cj-radius);
  padding: 0 16px;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  min-width: 44px;
}

/* Data section (Import / Export / Danger) */
.cj-data__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@container (min-width: 820px) {
  .cj-data__grid { grid-template-columns: 1fr 1fr; }
}
.cj-data__action {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: var(--cj-border);
  border-radius: var(--cj-radius);
  background: #fff;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  cursor: pointer;
  appearance: none;
  font: inherit;
  color: inherit;
}
.cj-data__action:hover {
  border-color: var(--cj-border-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.cj-data__action--primary {
  background: var(--cj-primary-soft);
  border-color: color-mix(in srgb, var(--cj-primary) 25%, #fff);
  cursor: default;
}
.cj-data__action--primary:hover { box-shadow: none; }
.cj-data__action--danger {
  border-color: color-mix(in srgb, var(--cj-error) 25%, #fff);
}
.cj-data__action--danger:hover {
  border-color: var(--cj-error);
  background: color-mix(in srgb, var(--cj-error) 5%, #fff);
}
.cj-data__leading {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(44, 74, 46, 0.1);
  color: var(--cj-primary);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
}
.cj-data__action--danger .cj-data__leading {
  background: color-mix(in srgb, var(--cj-error) 12%, #fff);
  color: var(--cj-error);
}
.cj-data__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cj-data__title { font-size: 14px; font-weight: 600; color: var(--cj-text); }
.cj-data__action--danger .cj-data__title { color: var(--cj-error); }
.cj-data__desc { font-size: 12px; color: var(--cj-text-alt); line-height: 1.45; }
.cj-data__file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: var(--cj-border);
  border-radius: var(--cj-radius);
  cursor: pointer;
  font-size: 13px;
  margin-top: 6px;
  max-width: 100%;
}
.cj-data__file input[type="file"] { display: none; }
.cj-data__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-data__btn {
  appearance: none;
  background: #fff;
  color: var(--cj-primary);
  border: var(--cj-border);
  padding: 8px 16px;
  border-radius: var(--cj-radius);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  margin-top: 8px;
  align-self: flex-start;
  transition: background .15s ease, border-color .15s ease;
}
.cj-data__btn:hover { border-color: var(--cj-border-strong); background: #fafaf7; }
.cj-data__btn--primary {
  background: var(--cj-primary);
  color: #fff;
  border-color: var(--cj-primary);
}
.cj-data__btn--primary:hover { background: color-mix(in srgb, var(--cj-primary) 85%, #000); border-color: transparent; }
.cj-data__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cj-data__result { margin: 8px 0 0; font-size: 12px; color: var(--cj-text-alt); }

.cj-data__danger {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--cj-error) 30%, #fff);
}
.cj-data__danger-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cj-error);
  font-weight: 700;
}

/* Count badge in history export button */
.calf-history__toolbar .cj-count {
  font-weight: 600;
  opacity: 0.85;
  margin-left: 2px;
}

/* ============================================================
   SIDEBAR FEATURED PRODUCTS (My Account only)
   ============================================================ */
.calf-featured {
  padding: var(--cj-space);
  background: #f9f9f9;
  border-radius: var(--cj-radius);
}
.calf-featured h3 {
  margin-top: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cj-text-alt);
}
.calf-featured ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.calf-featured a {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.calf-featured img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* ============================================================
   STATUS STRIP + TOAST
   ============================================================ */
.calf-app__status {
  position: sticky;
  bottom: 0;
  padding: 6px 12px;
  background: #fffae5;
  border-top: var(--cj-border);
  font-size: 13px;
  color: var(--cj-text-alt);
}

.calf-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border: var(--cj-border);
  border-radius: var(--cj-radius);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  max-width: 340px;
  z-index: 9999;
  animation: cj-toast-in 0.3s ease;
}
@keyframes cj-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.calf-toast__close {
  position: absolute;
  top: 4px;
  right: 8px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.calf-toast__title {
  margin: 0 0 8px;
  font-weight: 600;
}
.calf-toast__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.calf-toast__list a {
  display: flex;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  align-items: center;
}
.calf-toast__list img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

/* ============================================================
   MY ACCOUNT GATE (logged-out on /my-account/calf-journal/)
   ============================================================ */
.calf-gate {
  display: grid;
  gap: var(--cj-space, 16px);
  padding: var(--cj-space, 16px);
}
.calf-gate__card {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}
.calf-gate__bullets {
  padding-left: 20px;
  margin: 16px 0;
}
.calf-gate__cta {
  display: inline-block;
  padding: 12px 24px;
  background: #2a5934;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
}

/* ============================================================
   MOBILE TWEAKS
   ============================================================ */
@media (max-width: 640px) {
  /* ── History toolbar: compact, icon-only buttons ── */
  .calf-history__toolbar {
    gap: 6px;
    align-items: center;
  }
  .calf-history__toolbar input[type="search"] {
    min-width: 0;
    padding: 6px 10px;
    font-size: 14px;
    height: 36px;
    min-height: 0;
    box-sizing: border-box;
  }
  .calf-history__toolbar button {
    padding: 6px 10px;
    height: 36px;
    min-height: 0;
    font-size: 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
  }
  /* Hide button text on mobile — icons only */
  .calf-history__btn-label {
    display: none;
  }

  /* ── History table (mobile) ── */
  /* Zero-width columns instead of display:none — keeps all 9 columns
     in the table layout so colspan="9" on detail rows doesn't trigger
     a width recalculation that shifts the header. */
  .cj-dt-only {
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    visibility: hidden;
  }
  .cj-mb-only { display: block; }
  .calf-history__table { font-size: 14px; }
  .calf-history__table thead th { font-size: 11px; padding: 5px 4px 7px; }
  .calf-history__table td { padding: 10px 4px; }
  .cj-col-num   { width: 24px; font-size: 12px; }
  .cj-col-date  { width: 30%; }
  .cj-col-sex   { width: 17%; }
  .cj-col-wt    { width: 20%; }
  .cj-col-diff  { width: 16%; }
  .cj-col-exp   { width: 22px; }
  .cj-detail {
    padding: 8px 8px 10px 30px;
    font-size: 13px;
  }
  .cj-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }
  .cj-detail__comment { font-size: 12px; }
  .calf-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
  .calf-form__cards {
    gap: 10px;
  }
  .calf-card {
    min-height: 84px;
    padding: 14px 10px;
  }
  .calf-card__icon {
    font-size: 28px;
  }
  .calf-form__advanced-meta {
    display: none;
  }
  .calf-guest-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 8px;
    margin-bottom: 12px;
  }
  /* Override the desktop `flex: 1 1 280px` — in column layout flex-basis
     applies to the main axis (height), so the body would otherwise be
     forced to a 280px min-height, ballooning the banner to ~50% of the
     mobile viewport. Resetting to `flex: initial` lets it shrink to its
     content. */
  .calf-guest-banner__body {
    flex: 0 0 auto;
  }
  .calf-guest-banner__title {
    font-size: 12px;
    margin-bottom: 2px;
  }
  .calf-guest-banner__text {
    font-size: 13px;
    line-height: 1.35;
  }
  .calf-guest-banner__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .calf-guest-banner__cta {
    padding: 8px 16px;
    min-height: 40px;
    font-size: 14px;
  }
  .calf-guest-banner__link {
    padding: 6px 2px;
    font-size: 13px;
  }
}

/* ==========================================================================
   PUBLIC PAGE — Two-panel split layout (Variant 2)
   --------------------------------------------------------------------------
   Desktop: 30% sticky form + 70% history/import/settings
   Mobile:  tabs switch between form and content panels
   ========================================================================== */

/* ── Page wrapper ──────────────────────────────────────────────── */
.calf-page--public {
  --cjp-green: #2C4A2E;
  --cjp-text: #333333;
  --cjp-text-muted: #7a7a6e;
  --cjp-border: #d4cfc5;

  padding-top: 20px;
  color: var(--cjp-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
}

/* ── Page header (H1 + lead) ──────────────────────────────────── */
.calf-page__header {
  margin: 0 0 20px;
}
.calf-page__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--cjp-green);
  line-height: 1.3;
}
.calf-page__lead {
  margin: 0;
  font-size: 1rem;
  color: var(--cjp-text-muted);
}

/* ── App overrides for public page ────────────────────────────── */
.calf-page--public .calf-app--public {
  background: #fff;
  border: 1px solid var(--cjp-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ── Tabs (mobile + desktop variants) ─────────────────────────── */
.calf-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cjp-border);
  margin-bottom: 16px;
}
.calf-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--cjp-text-muted);
  min-height: 44px;
  font-family: inherit;
  white-space: nowrap;
}
.calf-tabs button.active {
  color: var(--cjp-green);
  border-bottom: 2px solid var(--cjp-green);
}
.calf-tabs button i {
  font-size: 14px;
}
.calf-tabs__badge {
  background: var(--cjp-green);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* Mobile tabs visible, desktop tabs hidden */
.calf-tabs--desktop { display: none; }
.calf-tabs--mobile  { display: flex; }

/* ── Two-panel layout ─────────────────────────────────────────── */
.calf-panels {
  display: block;
}

/* Mobile: panels toggled by .is-active class */
.calf-panels__form,
.calf-panels__content {
  display: none;
}
.calf-panels__form.is-active,
.calf-panels__content.is-active {
  display: block;
}

/* ── Form panel adjustments ────────────────── */
.calf-page--public .calf-form {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 60px;
  gap: 14px;
}
.calf-page--public .calf-form__submit-bar {
  margin: 0;
  padding: 10px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
}

/* ── Mobile/tablet: full-width app, not a cramped bordered card ── */
@media (max-width: 1099px) {
  /* Break the React app out of Impreza's 24px section container and drop the
     legacy "card on a page" chrome so it uses the full screen width. The app
     screens carry their own padding — without this the section (24px) + card
     (12px) + screen (16px) insets stacked to ~50px of wasted edge margin. */
  .l-section:has(.calf-page--public) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .calf-page--public .calf-app--public {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    /* No overflow:hidden — it would trap the sticky tab bar inside this box
       instead of letting it pin to the viewport / park above the footer. */
  }
  /* Re-inset the bare page chrome (breadcrumb / title) that used to ride on
     the now-removed section padding, so text isn't edge-to-edge. */
  /* !important: the base `.calf-breadcrumb { padding: 0 }` rule appears later
     in the file and would otherwise clobber this mobile gutter (equal
     specificity, later wins), leaving the crumb flush to the screen edge. */
  .calf-page--public > .calf-breadcrumb,
  .calf-page--public > .calf-page__header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* The install CTA has its own background, so it needs a side MARGIN (the
     card pulls in from the screen edges) rather than padding (which would
     leave the tinted block edge-to-edge). Small, deliberate gutters. */
  .calf-page--public > .calf-install-cta {
    margin-left: 16px;
    margin-right: 16px;
  }
  .calf-history {
    max-width: 100%;
    overflow: hidden;
  }
  /* Hide Impreza's site-wide mobile bottom nav (Главная/Избранное/…) on the
     journal page — it sits at z:1000 over the app's own TabBar, giving the
     user two competing bottom navigations. Same bar the account endpoint
     hides via .l-section.hide_on_default; here scoped to the journal page. */
  body:has(.calf-page--public) .l-section.hide_on_default {
    display: none !important;
  }
}

/* ── Desktop: 30/70 split (1100px+ to avoid overlap on iPad) ── */
@media (min-width: 1100px) {
  .calf-tabs--mobile  { display: none; }
  .calf-tabs--desktop { display: flex; }

  .calf-panels {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 24px;
    align-items: start;
  }

  /* Both panels always visible on desktop */
  .calf-panels__form,
  .calf-panels__content {
    display: block !important;
  }

  /* Sticky form panel */
  .calf-panels__form {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-left: 4px;
    padding-right: 16px;
    border-right: 1px solid var(--cjp-border);
  }

  /* ── Compact form for 30 % sidebar ────────────────────────── */
  .calf-page--public .calf-form {
    max-width: none;
    gap: 12px;
    padding-bottom: 60px;
  }
  .calf-page--public .calf-form__header {
    margin-bottom: 0;
  }
  .calf-page--public .calf-form__title {
    font-size: 17px;
  }
  .calf-page--public .calf-form__hint {
    font-size: 13px;
  }
  .calf-page--public .calf-form__legend {
    margin-bottom: 6px;
    font-size: 14px;
  }

  /* Sex: segmented control — no special desktop overrides needed */

  /* Difficulty: scale — no special desktop overrides needed */

  /* Date: segmented — no special desktop overrides needed */

  /* Advanced fields: always visible, two-column grid, no toggle */
  .calf-page--public .calf-form__advanced {
    border: none;
    background: transparent;
    padding: 0;
  }
  .calf-page--public .calf-form__advanced-summary {
    display: none;
  }
  .calf-page--public .calf-form__advanced > .calf-form__advanced-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    gap: 8px;
    align-items: start;
  }
  /* Comment textarea spans full width */
  .calf-page--public .calf-form__advanced-body .calf-field:has(textarea) {
    grid-column: 1 / -1;
  }

  /* ── Unified compact inputs: all same size + white background ────── */
  /* Impreza sets --inputs-height:3em and --inputs-background:#F5F3EE
     globally; background-color (not shorthand) is needed to override. */
  .calf-page--public .calf-field input,
  .calf-page--public .calf-field select,
  .calf-page--public .calf-field textarea,
  .calf-page--public .calf-form__custom-date-input,
  .calf-page--public .calf-history__toolbar input[type="search"] {
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  .calf-page--public .calf-field input,
  .calf-page--public .calf-field select,
  .calf-page--public .calf-form__custom-date-input,
  .calf-page--public .calf-history__toolbar input[type="search"] {
    height: 32px !important;
    min-height: 0 !important;
  }
  .calf-page--public .calf-field textarea {
    min-height: 60px !important;
  }
  /* Select: fix line-height (Impreza sets 39px via var) + custom arrow */
  .calf-page--public .calf-field select {
    line-height: 1.2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
  }
  .calf-page--public .calf-field__label {
    font-size: 12px;
  }
  .calf-page--public .calf-field__hint {
    font-size: 11px;
  }

  /* ── Floating label desktop overrides ─────── */
  .calf-page--public .calf-field--floating input,
  .calf-page--public .calf-field--floating select {
    height: 44px !important;
    padding: 18px 10px 2px !important;
  }
  .calf-page--public .calf-field--floating select {
    padding-right: 28px !important;
  }
  .calf-page--public .calf-field--floating textarea {
    padding-top: 18px !important;
  }
  .calf-page--public .calf-field--floating .calf-field__label {
    left: 11px;
  }

  /* Submit button */
  .calf-page--public .calf-form__submit {
    padding: 10px 20px;
    font-size: 14px;
    min-height: 40px;
  }

  /* History toolbar: same height as inputs */
  .calf-page--public .calf-history__toolbar input[type="search"] {
    min-width: 160px;
  }
  .calf-page--public .calf-history__toolbar button {
    padding: 6px 12px !important;
    height: 32px !important;
    min-height: 0 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
  }

  /* History table: tighter for sidebar layout */
  .calf-page--public .calf-history__table th,
  .calf-page--public .calf-history__table td {
    padding: 7px 5px;
    font-size: 13px;
  }
  .calf-page--public .cj-detail {
    font-size: 12px;
    padding-left: 32px;
  }
}

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.calf-page--public .calf-breadcrumb {
  margin: 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--cjp-text-muted);
}
.calf-page--public .calf-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.calf-page--public .calf-breadcrumb li {
  display: inline-flex;
  align-items: baseline;
  line-height: 1.3;
}
.calf-page--public .calf-breadcrumb li + li::before {
  content: "\203A";
  margin-right: 4px;
  color: var(--cjp-text-muted);
}
.calf-page--public .calf-breadcrumb a {
  color: var(--cjp-text-muted);
  text-decoration: none;
}
.calf-page--public .calf-breadcrumb a:hover {
  color: var(--cjp-green);
}
.calf-page--public .calf-breadcrumb [aria-current="page"] {
  color: var(--cjp-green);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────
 * PWA install prompt — banner + iOS instructional modal
 * ──────────────────────────────────────────────────────────────────────── */
.calf-install {
  margin: 0 0 16px;
}
.calf-install__banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #2a5934 0%, #3a7045 100%);
  color: #f0ead9;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(42, 89, 52, 0.18);
}
.calf-install__icon img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f0ead9;
  padding: 4px;
}
.calf-install__body {
  flex: 1;
  min-width: 0;
}
.calf-install__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.calf-install__text {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.92;
}
.calf-install__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.calf-install__cta {
  appearance: none;
  border: none;
  background: #f0ead9;
  color: #2a5934;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, box-shadow 0.1s;
}
.calf-install__cta:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.calf-install__cta:active {
  transform: translateY(1px);
}
.calf-install__dismiss {
  appearance: none;
  border: none;
  background: transparent;
  color: #f0ead9;
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
}
.calf-install__dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 520px) {
  .calf-install__banner {
    flex-wrap: wrap;
  }
  .calf-install__body {
    flex: 1 1 calc(100% - 60px);
  }
  .calf-install__actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  .calf-install__cta {
    flex: 1;
  }
}

/* iOS instructional modal — shown when user taps "Как установить" on iOS */
.calf-install__modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 99999;
}
.calf-install__modal-content {
  background: #fff;
  color: #222;
  max-width: 420px;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.calf-install__modal-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #2a5934;
}
.calf-install__steps {
  margin: 0 0 16px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.calf-install__steps li + li {
  margin-top: 8px;
}
.calf-install__ios-glyph {
  display: inline-block;
  font-size: 18px;
  padding: 0 4px;
  color: #2a5934;
  font-weight: 700;
}
.calf-install__modal-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}
.calf-install__modal-close {
  appearance: none;
  border: none;
  background: #2a5934;
  color: #f0ead9;
  font-weight: 700;
  font-size: 15px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.calf-install__modal-close:hover {
  background: #3a7045;
}

/* ===========================================================
   App-shell chrome — rendered by templates/page-calf-app.php
   Only active on pages using the `page-calf-app.php` template
   (body.cj-app-shell). All other pages remain unaffected.
   =========================================================== */

body.cj-app-shell {
  margin: 0;
  background: #f0ead9;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #2b2a26;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.cj-app-shell .cj-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: #2a5934;
  color: #f0ead9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  min-height: 56px;
}

body.cj-app-shell .cj-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}
body.cj-app-shell .cj-topbar__brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0ead9;
  padding: 2px;
  box-sizing: border-box;
  flex: 0 0 32px;
}
body.cj-app-shell .cj-topbar__brand-text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  letter-spacing: 0.2px;
}

body.cj-app-shell .cj-topbar__lang {
  position: relative;
  margin-left: auto;
  margin-right: 4px;
}
body.cj-app-shell .cj-topbar__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 4px 8px;
  font: 600 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  letter-spacing: 0.4px;
}
body.cj-app-shell .cj-topbar__lang-toggle:hover,
body.cj-app-shell .cj-topbar__lang-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.2);
}
body.cj-app-shell .cj-topbar__lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  color: #2b2a26;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
body.cj-app-shell .cj-topbar__lang-menu[hidden] {
  display: none;
}
body.cj-app-shell .cj-topbar__lang-menu a {
  display: block;
  padding: 8px 14px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
body.cj-app-shell .cj-topbar__lang-menu a:hover,
body.cj-app-shell .cj-topbar__lang-menu a[aria-current="page"] {
  background: #f0ead9;
  color: #2a5934;
  font-weight: 600;
}

body.cj-app-shell .cj-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.cj-app-shell .cj-topbar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
}
body.cj-app-shell .cj-topbar__action:hover {
  background: rgba(255, 255, 255, 0.18);
}
body.cj-app-shell .cj-topbar__action--account {
  background: #f0ead9;
  color: #2a5934;
  border-color: transparent;
}
body.cj-app-shell .cj-topbar__action--account:hover {
  background: #fff;
}

body.cj-app-shell .cj-app-main {
  padding: 12px 16px 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- About page (used by [calf_journal_about] on /o-dnevnike-telyat/) ---- */
.cj-about {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #2b2a26;
}
.cj-about__hero {
  margin-bottom: 36px;
}
.cj-about__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.2;
  margin: 0 0 12px;
  color: #2a5934;
}
.cj-about__lead {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.cj-about__cta {
  margin: 0;
}
.cj-about .cj-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s;
}
.cj-about .cj-btn--primary {
  background: #2a5934;
  color: #f0ead9;
}
.cj-about .cj-btn--primary:hover {
  background: #3a7045;
}
.cj-about__section {
  margin-bottom: 32px;
}
.cj-about__section h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  margin: 0 0 14px;
  color: #2a5934;
}
.cj-about__list,
.cj-about__steps {
  margin: 0;
  padding-left: 20px;
  line-height: 1.55;
}
.cj-about__list li,
.cj-about__steps li {
  margin-bottom: 10px;
}
.cj-about__steps li strong {
  display: block;
  margin-bottom: 2px;
  color: #2a5934;
}
.cj-about__faq dt {
  font-weight: 600;
  margin-top: 16px;
  color: #2a5934;
}
.cj-about__faq dd {
  margin: 4px 0 0;
  line-height: 1.55;
}

/* ======================================================================
   Install-CTA block on the journal page (/dnevnik-telyat/)
   The journal is a normal Impreza page; this aside is the only bridge
   to the install page, so it needs to stand out without overpowering
   the "free online journal" framing above it.
   ====================================================================== */
.calf-install-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px 14px 16px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #f5efdd 0%, #e8deb5 100%);
  border: 1px solid rgba(42, 89, 52, 0.18);
  border-radius: 12px;
}
.calf-install-cta--dismissed {
  display: none !important;
}
.calf-install-cta__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #42341e;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
  /* flex + lh:1 + равный отступ, чтобы glyph `×` стоял в геометрическом
     центре круга. Без этого браузер выравнивает `×` по baseline — при
     hover-подсветке круг визуально «сдвинут», хотя это иллюзия из-за
     смещения глифа внутри контейнера. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 22px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.calf-install-cta__close > span {
  /* Glyph `×` имеет асимметричные side-bearings в большинстве гарнитур;
     маленькое вертикальное смещение + em-юниты делают его оптически
     центрированным при любом размере шрифта. */
  display: block;
  transform: translateY(-0.04em);
}
.calf-install-cta__close:hover,
.calf-install-cta__close:focus-visible {
  opacity: 1;
  background: rgba(42, 89, 52, 0.08);
  outline: none;
}
.calf-install-cta__body {
  flex: 1 1 320px;
  min-width: 0;
}
.calf-install-cta__title {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.25;
  color: #2a5934;
}
.calf-install-cta__text {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #42341e;
}
.calf-install-cta__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #2a5934;
  /* Match the app's standard button radius (--r-md 14px, e.g. the wizard's
     "Дальше"). The pill (999px) look was off-brand vs the rest of the site. */
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.calf-install-cta__button:hover,
.calf-install-cta__button:focus-visible {
  background: #1f4527;
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}
.calf-install-cta__button span {
  display: inline-block;
  transition: transform 0.15s ease;
}
.calf-install-cta__button:hover span {
  transform: translateX(3px);
}
@media (max-width: 640px) {
  .calf-install-cta {
    padding: 16px;
  }
  .calf-install-cta__button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ======================================================================
   Install page (/install-calf-journal/) — rendered inside the app-shell
   template, so the layout is free of Impreza's container. Hero sits at
   the top, followed by a 3-column grid of platform-specific instructions,
   and finally the journal shortcode embeds itself below.
   ====================================================================== */
.cj-install {
  max-width: 920px;
  margin: 0 auto 32px;
  padding: 24px 16px 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cj-install__hero {
  text-align: center;
  padding: 24px 8px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f5efdd 0%, #e8deb5 100%);
  border: 1px solid rgba(42, 89, 52, 0.15);
  margin-bottom: 28px;
}
.cj-install__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(24px, 4.5vw, 34px);
  line-height: 1.15;
  color: #2a5934;
  margin: 0 0 10px;
}
.cj-install__lead {
  margin: 0 auto 18px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.55;
  color: #42341e;
}
.cj-install__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cj-install__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #2a5934;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cj-install__cta:hover,
.cj-install__cta:focus-visible {
  background: #1f4527;
}
.cj-install__cta[hidden] {
  display: none;
}
.cj-install__cta-hint {
  font-size: 13px;
  color: #6b5d3a;
}
.cj-install__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.cj-install__card {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(42, 89, 52, 0.14);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(42, 89, 52, 0.05);
}
.cj-install__card-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  color: #2a5934;
  margin: 0 0 12px;
}
.cj-install__steps {
  margin: 0;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #2f2a22;
}
.cj-install__steps li {
  margin-bottom: 8px;
}
.cj-install__steps li:last-child {
  margin-bottom: 0;
}
.cj-install__steps strong {
  color: #2a5934;
  font-weight: 600;
}
.cj-install__note {
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #42341e;
  background: rgba(255, 255, 255, 0.65);
  border-left: 3px solid #2a5934;
  border-radius: 4px;
}
@media (max-width: 480px) {
  .cj-install {
    padding: 16px 12px 0;
  }
  .cj-install__hero {
    padding: 20px 12px 22px;
  }
}

/* ======================================================================
   App-shell (/install-calf-journal/) — suppress the embedded journal's
   page header and install CTA. They duplicate the install hero above,
   so showing them twice makes the page feel like a marketing funnel
   instead of a real install screen.
   ====================================================================== */
body.cj-app-shell .calf-breadcrumb,
body.cj-app-shell .calf-page__header,
body.cj-app-shell .calf-install-cta {
  display: none !important;
}

/* ======================================================================
   PWA standalone mode — user launched the app from the home screen /
   installed PWA window. Hide every marketing/framing element so only
   the working app (form, history, import, settings) is visible.
   Matches both Chromium's standard display-mode media query and
   iOS-specific Safari.
   ====================================================================== */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  .cj-install,
  .calf-breadcrumb,
  .calf-page__header,
  .calf-install-cta {
    display: none !important;
  }
}
html.cj-is-standalone .cj-install,
html.cj-is-standalone .calf-breadcrumb,
html.cj-is-standalone .calf-page__header,
html.cj-is-standalone .calf-install-cta {
  display: none !important;
}

/* ======================================================================
   Impreza cookie notice (.l-cookie) on app-shell pages.
   - In PWA standalone: hide entirely — the user already went through
     cookie acceptance in browser session before install.
   - On web install page: theme's own `.w-btn.us-btn-style_1` CSS was
     dequeued by AppShell, so style the button + link natively to match
     the plugin palette.
   ====================================================================== */
html.cj-is-standalone .l-cookie {
  display: none !important;
}
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  .l-cookie { display: none !important; }
}
body.cj-app-shell .l-cookie {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 640px;
  background: #ffffff;
  color: #2b2a26;
  border: 1px solid rgba(44, 74, 46, 0.18);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  z-index: 100;
  font-size: 0.88rem;
  line-height: 1.45;
}
body.cj-app-shell .l-cookie-message {
  flex: 1 1 260px;
  margin: 0;
  color: #2b2a26;
}
body.cj-app-shell .l-cookie .privacy-policy-link {
  color: #2c4a2e;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
body.cj-app-shell .l-cookie .privacy-policy-link:hover {
  color: #1f3421;
}
body.cj-app-shell #us-set-cookie {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: #2c4a2e;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
body.cj-app-shell #us-set-cookie:hover {
  background: #1f3421;
}
body.cj-app-shell #us-set-cookie:active {
  transform: translateY(1px);
}
body.cj-app-shell #us-set-cookie .w-btn-label {
  color: inherit;
  font: inherit;
}

/* ======================================================================
   Inline auth modal — replaces the Impreza ush_popup for logins inside
   the PWA / journal. Full-screen overlay on mobile, centred card on
   desktop. Fixed position so it stays on screen over the journal app.
   ====================================================================== */
.cj-auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(30, 34, 28, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
  animation: cjAuthFadeIn 0.18s ease;
}
@keyframes cjAuthFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cj-auth-modal__card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cjAuthSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cjAuthSlideIn {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.cj-auth-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(44, 74, 46, 0.1);
}
.cj-auth-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2c4a2e;
}
.cj-auth-modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #6b6a5c;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.cj-auth-modal__close:hover {
  background: rgba(44, 74, 46, 0.08);
  color: #2c4a2e;
}
.cj-auth-modal__tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid rgba(44, 74, 46, 0.1);
}
.cj-auth-modal__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 4px;
  margin-right: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b6a5c;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cj-auth-modal__tab.is-active {
  color: #2c4a2e;
  border-bottom-color: #2c4a2e;
}
.cj-auth-modal__body {
  padding: 18px 20px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cj-auth-modal__field {
  display: block;
  margin-bottom: 14px;
}
.cj-auth-modal__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #2b2a26;
  margin-bottom: 6px;
}
.cj-auth-modal__input {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  background: #fafaf7;
  border: 1px solid rgba(44, 74, 46, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.2;
  color: #2b2a26;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.cj-auth-modal__input:focus {
  outline: none;
  border-color: #2c4a2e;
  background: #ffffff;
}
.cj-auth-modal__input::placeholder {
  color: #a3a296;
}
.cj-auth-modal__hint {
  margin: -6px 0 10px;
  font-size: 0.78rem;
  color: #6b6a5c;
  line-height: 1.35;
}
.cj-auth-modal__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdecea;
  border: 1px solid rgba(204, 51, 51, 0.2);
  color: #9b2828;
  font-size: 0.85rem;
  line-height: 1.4;
}
.cj-auth-modal__success {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #e8f5ec;
  border: 1px solid rgba(44, 74, 46, 0.2);
  color: #1f3421;
  font-size: 0.88rem;
  line-height: 1.4;
}
.cj-auth-modal__submit {
  width: 100%;
  appearance: none;
  border: 0;
  background: #2c4a2e;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cj-auth-modal__submit:hover:not(:disabled) {
  background: #1f3421;
}
.cj-auth-modal__submit:active:not(:disabled) {
  transform: translateY(1px);
}
.cj-auth-modal__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cj-auth-modal__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: cjAuthSpin 0.7s linear infinite;
}
@keyframes cjAuthSpin {
  to { transform: rotate(360deg); }
}
.cj-auth-modal__footer {
  margin-top: 14px;
  font-size: 0.82rem;
  color: #6b6a5c;
  line-height: 1.45;
  text-align: center;
}
.cj-auth-modal__footer a {
  color: #2c4a2e;
  text-decoration: underline;
}
.cj-auth-modal__row {
  display: flex;
  gap: 10px;
}
.cj-auth-modal__row .cj-auth-modal__field {
  flex: 1 1 50%;
  margin-bottom: 14px;
}
@media (max-width: 380px) {
  .cj-auth-modal__row {
    flex-direction: column;
    gap: 0;
  }
}
.cj-auth-modal__show-pwd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  color: #6b6a5c;
  cursor: pointer;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-weight: 500;
}
.cj-auth-modal__input-wrap {
  position: relative;
}
.cj-auth-modal__input-wrap .cj-auth-modal__input {
  padding-right: 58px;
}

/* ---- App-shell burger + drawer ---- */
body.cj-app-shell .cj-topbar__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
  cursor: pointer;
  padding: 0;
}
body.cj-app-shell .cj-topbar__burger:hover,
body.cj-app-shell .cj-topbar__burger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.18);
}
body.cj-app-shell .cj-topbar__burger-lines {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
body.cj-app-shell .cj-topbar__burger-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
body.cj-app-shell .cj-topbar__burger-lines span:nth-child(1) { top: 0; }
body.cj-app-shell .cj-topbar__burger-lines span:nth-child(2) { top: 50%; transform: translateY(-50%); }
body.cj-app-shell .cj-topbar__burger-lines span:nth-child(3) { bottom: 0; }

html.cj-drawer-open { overflow: hidden; }

.cj-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
}
.cj-drawer[hidden] { display: none; }

.cj-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 22, 0.52);
  animation: cjDrawerFade 180ms ease-out;
}
@keyframes cjDrawerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cj-drawer__panel {
  position: relative;
  width: min(320px, 86vw);
  height: 100%;
  background: #f6f1df;
  color: #2b2a26;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  animation: cjDrawerSlide 220ms cubic-bezier(.2,.8,.2,1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@keyframes cjDrawerSlide {
  from { transform: translateX(18px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.cj-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(43, 42, 38, 0.1);
}
.cj-drawer__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.cj-drawer__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 8px;
}
.cj-drawer__close:hover { background: rgba(43, 42, 38, 0.08); }

.cj-drawer__section {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(43, 42, 38, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cj-drawer__section:last-of-type { border-bottom: 0; }

.cj-drawer__account {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cj-drawer__account-label {
  font-size: 12px;
  color: #6b6a5c;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.cj-drawer__account-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}
.cj-drawer__account-email {
  font-size: 13px;
  color: #6b6a5c;
  word-break: break-all;
}
.cj-drawer__account-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #555249;
}

.cj-drawer__action {
  appearance: none;
  border: 1px solid rgba(43, 42, 38, 0.14);
  background: #fff;
  color: #2b2a26;
  font: 600 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}
.cj-drawer__action:hover { background: #fbf7e6; }
.cj-drawer__action:disabled { opacity: 0.6; cursor: progress; }
.cj-drawer__action--primary {
  background: #2c4a2e;
  color: #f6f1df;
  border-color: transparent;
}
.cj-drawer__action--primary:hover { background: #1f3821; }
.cj-drawer__action--logout {
  background: transparent;
  color: #8a3a2f;
  border-color: rgba(138, 58, 47, 0.3);
}
.cj-drawer__action--logout:hover { background: rgba(138, 58, 47, 0.08); }

.cj-drawer__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.cj-drawer__link:hover { color: #2c4a2e; }
.cj-drawer__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #2c4a2e;
  flex: 0 0 28px;
}

.cj-drawer__footer {
  margin-top: auto;
  padding: 14px 18px;
  font-size: 12px;
  color: #6b6a5c;
  text-align: center;
  border-top: 1px solid rgba(43, 42, 38, 0.08);
}
.cj-drawer__link-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.cj-drawer__link-hint {
  font-size: 12px;
  font-weight: 400;
  color: #6b6a5c;
}
.cj-drawer__link-ext {
  display: inline-flex;
  align-items: center;
  color: #6b6a5c;
  flex: 0 0 auto;
}

/* ---- Tab icons (inline SVG replacements for Font Awesome) ---- */
.cj-tab-ico {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
.calf-tabs--mobile button .cj-tab-ico { margin-right: 4px; }
.calf-tabs--desktop button .cj-tab-ico { margin-right: 6px; }

.cj-btn-ico {
  display: inline-block;
  vertical-align: middle;
}

/* ---- History export button ---- */
.calf-history__export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f0ead9;
  color: #2a5934;
  border: 1px solid rgba(42, 89, 52, 0.2);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.calf-history__export:hover:not(:disabled) {
  background: #e6dfc5;
}
.calf-history__export:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .calf-history__export .calf-history__btn-label { display: none; }
  .calf-history__export { padding: 8px 10px; }
}

/* ---- Form compact header + tooltip ---- */
.calf-form__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.calf-form__help {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px;
  color: #6b6a5c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  transition: background-color 120ms ease, color 120ms ease;
}
.calf-form__help:hover,
.calf-form__help:focus-visible {
  color: #2a5934;
  outline: none;
  background: rgba(42, 89, 52, 0.1);
}
.calf-form__help[aria-expanded="true"] {
  color: #2c4a2e;
  background: rgba(44, 74, 46, 0.14);
}

/* Inline tip — lives in the normal flow under the title, not absolute.
   Works identically in Safari PWA, iOS, Chrome, Firefox because there is
   no positioning context involved. Toggled via aria-expanded on the button. */
.calf-form__tip {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: rgba(44, 74, 46, 0.08);
  border-left: 3px solid rgba(44, 74, 46, 0.4);
  color: #3f4a3c;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 6px;
  max-width: 520px;
}

/* Compact vertical rhythm in the form — reclaim space above fieldsets */
.calf-form { gap: 14px; }
.calf-form__header { margin-bottom: -4px; }
.calf-form__legend { margin-bottom: 6px; }

/* ---- Settings — guest offline hint (sits above full editor) ---- */
.cj-settings__guest-hint {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #f6f1df;
  border: 1px solid #e5dfc8;
  border-radius: 10px;
  color: #555249;
  font-size: 13px;
  line-height: 1.5;
}
.cj-settings__guest-hint p { margin: 0; }
.cj-settings__guest-hint-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: #2c4a2e;
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.cj-settings__guest-hint-link:hover { color: #1f3821; }

/* ==============================================================
   ACCOUNT SCOPE — /my-account/calf-journal/ endpoint
   Two-panel layout piggy-backs on the unscoped .calf-panels
   rules already defined above. We only add the colour vars needed
   by those rules (they reference --cjp-border) plus scope-specific
   spacing/border treatment for the form column.
   ============================================================== */
.calf-app--account {
  --cjp-green: #2c4a2e;
  --cjp-text: #333;
  --cjp-text-muted: #7a7a6e;
  --cjp-border: #d4cfc5;
  padding: 16px 4px 24px;
  background: transparent;
}
.calf-app--account .calf-form {
  max-width: 100%;
  margin: 0;
  padding-bottom: 32px;
  gap: 14px;
}
.calf-app--account .calf-form__header {
  margin-bottom: 0;
}
.calf-app--account .calf-form__title {
  font-size: 17px;
}
.calf-app--account .calf-form__submit-bar {
  margin: 0;
  padding: 10px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
}
@media (max-width: 1099px) {
  .calf-app--account {
    padding: 12px 0 20px;
  }
}

.calf-account-marketing {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e0d4;
}
.calf-account-marketing:empty {
  display: none;
}


/* ==========================================================================
   Cookie toast — compact bottom-corner banner replacing Impreza's .l-cookie
   on app-shell pages (install-calf-journal, public journal). Hidden by
   default; .is-visible adds the slide-up animation after a short delay.
   ========================================================================== */
.cj-cookie-toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 16px 14px 14px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px 12px;
  align-items: start;
  background: #ffffff;
  color: var(--cj-text, #222);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--cj-radius-lg, 14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 10000;
}
.cj-cookie-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 768px) {
  .cj-cookie-toast {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 360px;
    margin: 0;
  }
}
.cj-cookie-toast__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  color: #a77b2f;
  flex: none;
}
.cj-cookie-toast__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cj-cookie-toast__body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.cj-cookie-toast__text {
  margin: 0;
  color: var(--cj-text, #222);
}
.cj-cookie-toast__text a {
  color: var(--cj-primary, #2a5934);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cj-cookie-toast__text a:hover {
  text-decoration: none;
}
.cj-cookie-toast__actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.cj-cookie-toast__btn {
  appearance: none;
  -webkit-appearance: none;
  font: 600 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 9px 18px;
  min-height: 36px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  background: var(--cj-primary, #2a5934);
  color: #fff;
  transition: background-color 150ms ease;
}
.cj-cookie-toast__btn:hover,
.cj-cookie-toast__btn:focus-visible {
  background-color: color-mix(in srgb, var(--cj-primary, #2a5934) 85%, #000);
  outline: none;
}
.cj-cookie-toast__close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--cj-text-alt, #888);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.cj-cookie-toast__close:hover,
.cj-cookie-toast__close:focus-visible {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--cj-text, #222);
  outline: none;
}
.cj-cookie-toast[hidden] {
  display: none !important;
}

/* ============================================================
 * WC My Account calf-journal endpoint
 *
 * MOBILE (≤1023px): fullscreen takeover.
 * Hides WC sidebar nav, Impreza mobile bottom-bar, Bitrix24 widget,
 * site header/footer — so the React PWA-like app fills the viewport.
 *
 * DESKTOP (≥1024px): keep site chrome (header, footer, site menu) so the
 * user can navigate to cart/store/etc. WC sidebar nav is hidden because
 * our React Desktop dashboard has its own sidebar (Сегодня/Журнал/Стадо/
 * Настройки) — leaving both visible would create two competing nav lists.
 * ============================================================ */

/* Universal background match for app shell. */
body.cj-account-app {
  background: var(--bg, #faf6ee);
}

/* LOAD-BEARING for the bottom TabBar. The bar is a `position: sticky` direct
   child of <body> (React portal — App.jsx / lib/tabBarHost.js), so body must
   NOT be a scroll container: any `overflow` != visible makes body the sticky
   scrollport, and `bottom: 0` then pins the bar to the DOCUMENT bottom
   (off-screen) instead of the screen bottom.
   Same declaration also clears the older `fixed`-era trap: Impreza sets
   `body { overflow-x: hidden }`, and any body-level overflow value is a known
   trigger class for iOS WebKit re-anchoring fixed descendants to the body box
   (the bar rendered visually after the footer). `overflow-x: clip` kept body in
   that risk class, so clipping is removed entirely instead: on this site
   `.l-canvas` and `.l-footer` (the only two layout roots) already clip
   horizontally themselves, making body-level clipping redundant. With body
   overflow fully `visible` the viewport is unambiguously the scroller/anchor on
   every engine, ancient iOS included. Scoped to journal surfaces only.
   `body.cj-public-app` is set server-side (PublicShortcode::body_class) —
   no `:has()` dependency, works on pre-15.4 Safari. */
body.cj-account-app,
body.cj-public-app {
  overflow-x: visible !important;
}

/* Keeps the canvas out of the "scroll container" class for the app's OWN
   sticky headers (.calf-topbar and friends live INSIDE .calf-app, i.e. inside
   the canvas). Impreza ships `.l-canvas { overflow: hidden }` site-wide, and
   `hidden` makes the canvas a (programmatic) scroller — sticky descendants
   would then anchor to the canvas box instead of the viewport and never stick.
   Re-scope ON JOURNAL PAGES ONLY to `clip` on x (clips horizontal overflow
   WITHOUT creating a scroll container) and `visible` on y.
   NOTE: the bottom TabBar no longer depends on this — it hangs off <body>
   (lib/tabBarHost.js), precisely because the canvas ends before the footer.
   Old-Safari (≤15) fallback: `clip` unsupported → the first declaration keeps
   `hidden` and the in-app sticky headers degrade to non-sticky. Acceptable. */
body.cj-account-app .l-canvas,
body.cj-public-app .l-canvas {
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
  /* Канвас должен дотягиваться до низа экрана, иначе на коротком экране
     (пустое стадо) под приложением висит полоса чужого фона / футер
     всплывает выше сгиба. Раньше это же условие держало парковку таббара —
     теперь бар живёт в <body> и от канваса не зависит.
     ИЗМЕРЕНО на iPhone PWA (полевой отчёт 2026-06-11, HUD ?cjdiag):
     svh=879 dvh=879 lvh=926 vh=926 innerH=879 screen=926. То есть на iOS в
     установленном PWA `dvh`/`svh` НА 47px КОРОЧЕ экрана (879), а `lvh`/`vh`
     дают полный экран (926). Канвас на 100dvh парковал бар на 879 → под ним
     47px бежевого фона. Браузеру оставляем dvh (он корректно избегает
     адресной строки), а В PWA берём lvh — канвас дотягивается до физ. низа,
     бар прижат вплотную. */
  min-height: 100vh;
  min-height: 100dvh;
}
/* PWA: lvh = полная высота экрана (в браузере lvh ушёл бы под адресную
   строку, потому скоупим только на standalone). */
html.cj-is-standalone body.cj-account-app .l-canvas,
html.cj-is-standalone body.cj-public-app .l-canvas {
  min-height: 100lvh;
}

/* Hide the Bitrix24 chat widget on the public journal/install pages — it's a
   distraction inside the app and was explicitly unwanted there. PHP also
   unhooks the loader (Enqueue::maybe_hide_account_chrome); this is the CSS
   backstop for any path the closure-strip can't reach. Applies at all widths. */
body:has(.calf-page--public) .b24-widget-button-wrapper,
body:has(.calf-page--public) .b24-widget-button-shadow,
body:has(.calf-page--public) .b24-widget-button-popup,
body:has(.calf-page--public) [class*="b24-widget"] {
  display: none !important;
}

/* Mobile-only. Two tiers:
 *  · ALWAYS (web + PWA): kill chrome that directly competes with the app —
 *    Impreza's own mobile bottom-nav (clashes with our TabBar), the Bitrix24
 *    chat bubble, and the scroll-to-top button.
 *  · PWA-ONLY (html.cj-is-standalone, set by App.jsx): strip the site
 *    header/footer and page gutters for a true full-screen installed app. In a
 *    plain browser tab the account endpoint must stay a NORMAL web page WITH the
 *    Impreza header/footer — hiding them there just left an empty gap on top.
 * WC sidebar nav hide is handled by theme's wc-account-sidebar.css. */
@media (max-width: 1023px) {
  body.cj-account-app .l-section.hide_on_default {
    display: none !important;
  }
  body.cj-account-app .b24-widget-button-wrapper,
  body.cj-account-app .b24-widget-button-shadow,
  body.cj-account-app .b24-widget-button-popup {
    display: none !important;
  }
  body.cj-account-app .w-toplink {
    display: none !important;
  }

  /* Flatten the nested frames. The endpoint was triple-bordered: the grey
     Impreza section gutter → a white rounded WooCommerce content card (24px
     pad + 16px radius) → then the app, which ALSO carries its own 16px
     component gutters. Strip the outer two layers so the journal sits directly
     on the page surface. Applies in BOTH web and PWA — only header/footer
     hiding (below) is PWA-gated. */
  body.cj-account-app .l-main,
  body.cj-account-app .l-section,
  body.cj-account-app .l-canvas,
  body.cj-account-app .l-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.cj-account-app .woocommerce,
  body.cj-account-app .woocommerce-account .woocommerce-MyAccount-content,
  body.cj-account-app .woocommerce-MyAccount-content {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Футер здесь больше не прячем — это делает общее правило ниже, для всех
     ширин и в браузере тоже. Шапка остаётся: она несёт колокольчик. */
}

/* Сайтовый футер на журнальных страницах не нужен НИ В PWA, НИ В БРАУЗЕРЕ
   (решение bzrkv 2026-07-25): /journal/ равняется на кабинет /dashboard/, а у
   того футера нет вовсе (проверено: 0 вхождений `l-footer` в разметке).
   Второй мотив — измеримый: футер = 803px и он ВНЕ `.l-canvas`, то есть в
   браузере это 803px страницы, где таббар висит поверх чужого контента.
   Шапка НЕ скрывается — она несёт колокольчик и поиск; в PWA её отдельно
   ужимают правила ниже до ЛОГОТИП + КОЛОКОЛЬЧИК.
   Оба журнальных сурфейса: публичный start_url (body.cj-public-app) и
   account-эндпоинт (body.cj-account-app, сам 301-ит на /journal/).
   DOM (замерено): logo = .l-subheader.at_middle .l-subheader-cell > .w-image;
   bell = … .l-subheader-cell > .w-html > div > #cj-notif-bell. */
body.cj-public-app .l-footer,
body.cj-account-app .l-footer {
  display: none !important;
}
/* Impreza paints .l-canvas white — on journal pages it peeked through every
   transparent gap (тонкая белая полоса под шапкой, поля вокруг приложения,
   особенно в тёмной теме). The app token covers both themes. Applies in
   browser AND PWA — единый тон всей оболочки. */
body.cj-public-app .l-canvas,
body.cj-account-app .l-canvas {
  background: var(--bg, #faf6ee) !important;
}
/* Та же история с секциями: Impreza даёт им серый фон (#F2F4F7) и верхний
   отступ — между шапкой и инсталл-баром висел «серый участок» (замерено:
   32px). Бар должен идти вплотную к шапке. Селектор сильнее (.l-main
   .l-section), чем у flatten-блока ниже, и без media — на всех ширинах. */
body.cj-public-app .l-main .l-section,
body.cj-account-app .l-main .l-section {
  padding-top: 0 !important;
  background: var(--bg, #faf6ee) !important;
}
/* PHP-инсталл-бар публичной страницы не нужен в установленном приложении. */
html.cj-is-standalone .calf-install-bar {
  display: none !important;
}
/* НЕ зануляем padding-top страницы: при скрытом баре (юзер закрыл крестиком)
   первым элементом становятся хлебные крошки, и без верхнего отступа они
   прижимались к шапке. Бар подтягивается к шапке своим negative margin-top
   (styles.css .calf-install-bar--page), крошки сохраняют воздух. */

/* Row-level: drop any subheader row that carries neither the logo nor the
   bell. The bell lives in DIFFERENT rows per header variant (at_top in the
   desktop header, at_middle in the mobile one) — so rows are filtered by
   content, not by name. :has() — supported everywhere cj-is-standalone can
   be set (iOS 16.4+); browsers without it drop the rule and keep the full
   header (safe degradation). */
html.cj-is-standalone body.cj-public-app .l-subheader:not(:has(.w-image)):not(:has(#cj-notif-bell)),
html.cj-is-standalone body.cj-account-app .l-subheader:not(:has(.w-image)):not(:has(#cj-notif-bell)) {
  display: none !important;
}
/* Widget-level: inside the surviving rows hide everything except the logo
   image and the bell wrapper. */
html.cj-is-standalone body.cj-public-app .l-subheader .l-subheader-cell > *:not(.w-image):not(:has(#cj-notif-bell)),
html.cj-is-standalone body.cj-account-app .l-subheader .l-subheader-cell > *:not(.w-image):not(:has(#cj-notif-bell)) {
  display: none !important;
}

/* One tone: the header rows ship white (Impreza subheader bg) — on the beige
   app it read as «белая полоса под шапкой». Paint the whole header with the
   app token (switches with the dark theme too) and drop its borders/shadows. */
html.cj-is-standalone body.cj-public-app .l-header,
html.cj-is-standalone body.cj-public-app .l-subheader,
html.cj-is-standalone body.cj-account-app .l-header,
html.cj-is-standalone body.cj-account-app .l-subheader {
  background: var(--bg, #faf6ee) !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Статус-бар iOS: со style=black-translucent (Pwa::render_head_meta) бар
   прозрачный и контент уезжает под него — шапка отращивает safe-area сверху,
   и зона часов/батареи красится ЕЁ фоном (бежевый/тёмный токен) вместо
   системного белого («белая полоса сверху»). В браузерной вкладке
   env(safe-area-inset-top)=0 — правило не влияет. */
html.cj-is-standalone body.cj-public-app .l-header,
html.cj-is-standalone body.cj-account-app .l-header {
  padding-top: env(safe-area-inset-top, 0px);
}
/* Фон за пределами шапки (резинка скролла вверх, прозрачные зазоры) — тем же
   токеном, чтобы под полупрозрачным статус-баром не проступал белый. */
html.cj-is-standalone,
html.cj-is-standalone body.cj-public-app,
html.cj-is-standalone body.cj-account-app {
  background: var(--bg, #faf6ee) !important;
}
/* Impreza ships the header position:fixed and compensates with JS-driven
   offsets; inside the standalone flex column that left content UNDER the
   header («Журнал» заезжал под логотип). v1.7.54 ставил static — геометрия
   детерминированная, но при скролле ЛОГОТИП УЕЗЖАЛ вместе с контентом
   (полевой отчёт 2026-06-11: «шапка должна быть статичной»). Sticky
   сохраняет участие в потоке (никакой JS-компенсации, контент не заезжает
   под шапку) И прилипает к верху вьюпорта при скролле. z-index ниже
   модалок (999999+), выше topbar-а экрана (5). */
html.cj-is-standalone body.cj-public-app .l-header,
html.cj-is-standalone body.cj-account-app .l-header {
  position: sticky !important;
  top: 0;
  z-index: 120;
}
/* Заголовок экрана («Журнал», «Сегодня»…) прилипает ПОД шапкой, а не под
   статус-баром: смещение = фактическая высота шапки, замеряется в App.jsx
   (ResizeObserver → --cj-site-header-h). Fallback — типовая высота
   мобильной шапки Impreza + safe-area. */
/* ⚠️ ФОЛБЭК ОБЯЗАН БЫТЬ НУЛЁМ. Переменную ставил ResizeObserver в App.jsx, и
   его убрали вместе со старой sticky-шапкой (см. комментарий там же): в своей
   оболочке `.l-header` нет вовсе, мерить нечего. А запасное значение осталось
   прежним — «типовая высота шапки Impreza + safe-area», то есть ~119px. Без
   переменной шапка приложения прилипала на 119px ниже верха экрана, и контент
   проезжал ВЫШЕ неё — под статус-бар, наезжая на часы (видео bzrkv 03.08).
   Ноль означает «шапки сайта нет, липнуть к самому верху»; если оболочка с
   шапкой вернётся и снова начнёт ставить переменную, правило заработает как
   прежде без правок. */
html.cj-is-standalone body.cj-public-app .calf-topbar,
html.cj-is-standalone body.cj-account-app .calf-topbar {
  top: var(--cj-site-header-h, 0px);
}
/* Поджать минимальную PWA-шапку. ЗАМЕРЕНО на странице 2026-06-13: строка лого
   .l-subheader.at_middle имела ФИКС-высоту 100px, а лого — 70px → большой зазор
   от логотипа до заголовка экрана (паддинги все 0 — поэтому правка паддинга не
   помогала). Отпускаем высоту строки/обёртки/ячеек (height:auto) и срезаем лого
   до 44px (max-height сохраняет пропорции) → шапка ~60px вместо 100px. */
html.cj-is-standalone body.cj-public-app .l-subheader.at_middle,
html.cj-is-standalone body.cj-account-app .l-subheader.at_middle,
html.cj-is-standalone body.cj-public-app .l-subheader.at_middle .l-subheader-h,
html.cj-is-standalone body.cj-account-app .l-subheader.at_middle .l-subheader-h,
html.cj-is-standalone body.cj-public-app .l-subheader.at_middle .l-subheader-cell,
html.cj-is-standalone body.cj-account-app .l-subheader.at_middle .l-subheader-cell {
  height: auto !important;
  min-height: 0 !important;
}
html.cj-is-standalone body.cj-public-app .l-subheader.at_middle .w-image,
html.cj-is-standalone body.cj-account-app .l-subheader.at_middle .w-image,
html.cj-is-standalone body.cj-public-app .l-subheader.at_middle .w-image-h,
html.cj-is-standalone body.cj-account-app .l-subheader.at_middle .w-image-h,
html.cj-is-standalone body.cj-public-app .l-subheader.at_middle .w-image img,
html.cj-is-standalone body.cj-account-app .l-subheader.at_middle .w-image img {
  max-height: 44px !important;
}
/* Тёмная тема в PWA: фирменный знак тёмный → на тёмной шапке невидим.
   Белый силуэт через filter; в браузерном режиме шапка сайта светлая —
   там фильтр не нужен (скоуп только standalone+dark). */
html.cj-is-standalone[data-theme="dark"] body.cj-public-app .l-header .w-image img,
html.cj-is-standalone[data-theme="dark"] body.cj-account-app .l-header .w-image img {
  filter: brightness(0) invert(1);
}
/* Scroll-to-top bubble has no place in an installed app. */
html.cj-is-standalone body.cj-public-app .w-toplink,
html.cj-is-standalone body.cj-account-app .w-toplink {
  display: none !important;
}

/* No scroll on empty screens. The page used to be header(60) + root
   (min-height:100vh) + section paddings → always ~170px of scroll even with
   zero records. In standalone, lay the canvas out as a flex column sized
   EXACTLY to the viewport and let the app fill the remainder; every layer in
   between becomes a transparent flex pass-through with its paddings stripped.
   Long content still grows and scrolls naturally (flex-basis auto). */
html.cj-is-standalone body.cj-public-app .l-canvas,
html.cj-is-standalone body.cj-account-app .l-canvas {
  display: flex;
  flex-direction: column;
}
html.cj-is-standalone body.cj-public-app .l-canvas > .l-main,
html.cj-is-standalone body.cj-account-app .l-canvas > .l-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.cj-is-standalone body.cj-public-app .l-main .l-section,
html.cj-is-standalone body.cj-account-app .l-main .l-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
html.cj-is-standalone body.cj-public-app .l-main .l-section-h,
html.cj-is-standalone body.cj-account-app .l-main .l-section-h {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 0 !important;
}
html.cj-is-standalone body.cj-public-app .calf-page--public,
html.cj-is-standalone body.cj-account-app .l-section-h .woocommerce {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* The app root drops its own 100vh floor — the flex chain above already
   hands it exactly the space under the header. */
html.cj-is-standalone body.cj-public-app #calf-journal-root,
html.cj-is-standalone body.cj-account-app #calf-journal-root {
  flex: 1 1 auto;
  min-height: 0;
}

/* END — no content below this line */