/* 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: 999px;
  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: 999px;
  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: tighter card padding, prevent overflow ── */
@media (max-width: 1099px) {
  .calf-page--public .calf-app--public {
    padding: 16px 12px;
    overflow: hidden;
  }
  .calf-history {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ── 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: 16px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 44px 18px 22px;
  margin: 0 0 28px;
  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: 20px;
  line-height: 1.25;
  color: #2a5934;
}
.calf-install-cta__text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #42341e;
}
.calf-install-cta__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #2a5934;
  border-radius: 999px;
  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: 999px;
  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);
}

/* Mobile-only: hide site chrome (header/footer/Bitrix) for app-like UX.
 * WC sidebar nav hide is handled by theme's wc-account-sidebar.css —
 * applied globally to all WC account endpoints. */
@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;
  }
  body.cj-account-app .l-header,
  body.cj-account-app .l-footer {
    display: none !important;
  }
  body.cj-account-app .l-main,
  body.cj-account-app .l-section,
  body.cj-account-app .l-canvas {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* END — no content below this line */