/* Readability overrides; load after style.css and safari.css. */
:root {
  --muted: #626c5c;
}

/* Text and illustration occupy separate grid cells at every width. */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  align-items: center;
  gap: 20px;
  min-height: 0;
  padding: 28px;
  overflow: visible;
}
.hero-copy {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.hero h2 {
  position: static;
  max-width: none;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.35;
  letter-spacing: -.55px;
  overflow-wrap: anywhere;
  color: #343e2f;
}
.hero h2 span { color: #596b36; }
.hero-kicker {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 1.1px;
  color: #59694b;
}
.hero p {
  position: static;
  max-width: none;
  font-size: 13px;
  line-height: 1.65;
  margin-top: 14px;
  color: #56634e;
}
.hero-art {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 310px;
  min-width: 0;
  margin: 0;
  justify-self: center;
  align-self: center;
}
.hero-art .safari-elephant {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  transform: none;
}

/* Keep supporting text readable on the warm, pale surfaces. */
.brand-caption, .profile-button small, .sidebar-quote,
.eyebrow, .page-subtitle, .summary-label, .summary-note,
.summary-value span, .task-meta, .task-time, .gentle-note,
.inspiration p, .legend, .demo-notice, .goal-card .goal-count,
.goal-card footer, .goal-card .card-top .look-name,
.empty p, .info-item > span, .stat > span, .stat small,
.settings-grid p, .field small, .form-intro, .explanation,
.suggestion-row small, .color-custom, .palette-label,
.safari-summary .summary-counts, .goal-preview small,
.appearance-note, .appearance-title span, .appearance-status,
.custom-color-input, .hex-field, .color-slider-label,
.stage-tools small, .detail-page-head .eyebrow,
.chart-col > span, .chart-col > small {
  color: #626c5c;
}
.sidebar-quote strong, .inspiration h3 { color: #4d5b40; }
.nav-item, .secondary, .text-button, .chip,
.look-caption, .stage-add, .add-task, .demo-notice button,
.detail-main .tab-row button, .appearance-tabs button {
  color: #536346;
}
.nav-item.active, .chip.active, .appearance-tabs button.active {
  color: #42552c;
}
.detail-main .tab-row button.active { color: #fff; }
.ontrack, .detail-description { color: #53673e; }
.offtrack { color: #79602f; }
.new-goal-card { color: #566848; }
.task-row.done .task-title, .tree-row.done > .node-title {
  color: #687162;
  text-decoration-color: #8e9987;
}
.tag {
  max-width: 100%;
  color: #42513a;
  color: color-mix(in srgb, var(--color) 25%, #29342a);
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* User colors remain on the artwork and bars, not low-contrast digits. */
.mini-goal .percent, .table-line > b {
  color: #48583e !important;
}

/* Allow longer Russian labels to wrap instead of forcing tiny type. */
.dashboard > section, .detail-main, .detail-heading,
.summary-card > div, .goal-card, .group-card, .stage-title-button {
  min-width: 0;
}
.page-subtitle, .brand-caption, .profile-button small,
.summary-label, .summary-note, .mini-goal small,
.legend, .gentle-note, .demo-notice, .goal-card .goal-count,
.goal-card footer, .stat small, .group-card .group-body small,
.goal-preview small, .field small, .suggestion-row small,
.appearance-note, .appearance-title span, .appearance-status,
.color-custom, .palette-label, .stage-tools small {
  font-size: 12px;
  line-height: 1.6;
}
.task-title, .tree-row > .node-title {
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.task-meta, .task-time, .tree-row .schedule {
  font-size: 12px;
  line-height: 1.5;
}
.task-meta { overflow-wrap: anywhere; }
.task-time { flex-shrink: 0; }
.task-row { gap: 12px; }
.tree-row { flex-wrap: wrap; }
.tree-row > .node-title { min-width: 0; flex: 1 1 130px; }
.tree-row .schedule {
  max-width: 100%;
  white-space: normal;
  color: #536b3f !important;
}
.summary-card { align-items: center; }
.summary-value { flex-wrap: wrap; gap: 2px 5px; }
.summary-value span { font-size: 13px; line-height: 1.4; }
.summary-note { margin-top: 5px; }
.mini-goal h3, .inspiration h3, .group-card h3 {
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.inspiration p, .settings-grid p, .info-item, .form-intro, .explanation {
  font-size: 13px;
  line-height: 1.7;
}
.side-card .text-button, .stage-tools .text-button,
.stage-add, .add-task, .section-head .text-button {
  font-size: 12px;
  line-height: 1.5;
}
.goal-card h2 {
  font-size: 15px;
  line-height: 1.5;
  min-height: 0;
  overflow-wrap: anywhere;
}
.goal-card .card-top, .goal-card .goal-progress-line,
.goal-card footer, .goal-top-info, .appearance-title {
  flex-wrap: wrap;
}
.goal-card .card-top .tag { font-size: 11px; }
.goal-card .card-top .look-name { font-size: 10px; line-height: 1.5; }
.goal-card footer { row-gap: 4px; }
.safari-stage .stage-title-button h3 { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.safari-stage .stage-progress { font-size: 13px; }
.safari-summary .summary-counts, .look-caption { font-size: 12px; line-height: 1.6; }
.detail-main .tab-row button, .appearance-tabs button { font-size: 13px; line-height: 1.45; }
.detail-page-head .detail-heading { overflow-wrap: anywhere; }
.section-head { flex-wrap: wrap; }
.section-head .text-button { white-space: normal; }
.field { font-size: 13px; }
.field input, .field select, .field textarea { font-size: 14px; }
.field small { font-size: 12px; }
.modal-actions { flex-wrap: wrap; }
.modal-actions .primary, .modal-actions .secondary, .modal-actions .danger { font-size: 12px; }
.goal-preview h3 { font-size: 15px; overflow-wrap: anywhere; }
.goal-preview > div { min-width: 0; }

/* The eight animal choices keep room for their names and descriptions. */
.natural-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px 10px; }
.nature-choice { min-width: 0; color: #58684a; font-size: 11px; line-height: 1.45; }
.nature-choice > span:last-child { max-width: 100%; overflow-wrap: anywhere; }
.animal-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.animal-choice { min-width: 0; padding: 14px 9px; text-align: center; }
.animal-choice b { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.animal-choice small, .field .appearance-picker .animal-choice small {
  font-size: 11px;
  line-height: 1.5;
  color: #626c5c;
  overflow-wrap: anywhere;
}
.modal .animal-choice .safari-elephant--compact { transform: none; }
.custom-color-input, .hex-field, .color-slider-label { font-size: 12px; line-height: 1.5; }
.hex-field input { font-size: 13px; }
.custom-color-top { flex-wrap: wrap; }
.color-slider-label { gap: 12px; }
.color-slider-label output { flex-shrink: 0; }

.week-day, .calendar-weekday, .mini-calendar { font-size: 11px; color: #626e58; }
.week-day b, .mini-calendar .day-box { color: #526347; }
.week-day.active, .week-day.active b { color: #fff; }
.mini-calendar .day-box.productive { color: #455e31; }
.calendar-cell { color: #56654b; }
.calendar-cell.productive, .calendar-cell.selected { color: #435c31; }
.calendar-cell small { font-size: 10px; line-height: 1.35; text-align: center; }
.calendar-cell.filler { opacity: .65; }
.chart-col > span { font-size: 11px; }
.chart-col > small { font-size: 10px; }

@media (max-width: 700px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px;
  }
  .hero-copy { max-width: none; }
  .hero h2 { font-size: 23px; line-height: 1.35; }
  .hero-kicker { font-size: 11px; margin-bottom: 10px; }
  .hero p { font-size: 13px; max-width: none; margin-top: 12px; }
  .hero-art { position: static; width: 245px; max-width: 100%; margin: 0; }
  .summary-card { padding: 14px 12px; gap: 9px; }
  .summary-label, .summary-note { font-size: 11px; }
  .summary-value span { font-size: 11px; }
  .task-title, .tree-row > .node-title { font-size: 14px; }
  .task-meta, .task-time { font-size: 11px; }
  .task-row, .detail-flat-tasks .task-row { gap: 9px; padding: 14px 11px; }
  .task-row .steak-icon { width: 28px; height: 26px; }
  .tree-row .schedule { font-size: 11px; }
  .safari-stage .tree-list { padding-left: 14px; }
  .tree-children { padding-left: 14px; }
  .safari-stage .stage-title-button h3 { font-size: 13px; }
  .safari-stage .stage-progress { font-size: 12px; }
  .safari-stage .stage-heading { gap: 8px; }
  .safari-stage .stage-status { width: 19px; height: 19px; }
  .goal-card { padding: 15px; }
  .goal-card h2 { font-size: 14px; min-height: 0; }
  .goal-card .goal-count, .goal-card footer { font-size: 11px; }
  .goal-card .card-top .tag { font-size: 10px; }
  .goal-card .goal-progress-line { align-items: baseline; row-gap: 3px; }
  .group-card h3 { font-size: 12px; }
  .group-card .text-button { font-size: 11px; }
  .new-goal-card b { font-size: 13px; }
  .safari-summary .summary-counts, .look-caption { font-size: 12px; }
  .detail-main .tab-row button, .appearance-tabs button { font-size: 12px; }
  .goal-preview h3 { font-size: 14px; }
  .goal-preview small { font-size: 11px; }
  .appearance-panel { padding: 17px 13px; }
  .appearance-title span, .appearance-note, .appearance-status { font-size: 11px; }
  .animal-choice b { font-size: 12px; }
  .animal-choice small, .field .appearance-picker .animal-choice small { font-size: 11px; }
  .nature-choice { font-size: 11px; }
  .mobile-nav {
    height: calc(76px + env(safe-area-inset-bottom));
    padding: 8px 7px calc(8px + env(safe-area-inset-bottom));
    gap: 2px;
  }
  .mobile-nav button {
    min-width: 0;
    flex: 1 1 0;
    padding: 4px 1px;
    gap: 6px;
    font-size: 11px;
    line-height: 1.25;
    color: #5d6a52;
  }
  .mobile-nav button.active { color: #435b2e; font-weight: 800; }
  .main, .main:has(.detail-page-head) { padding-bottom: calc(106px + env(safe-area-inset-bottom)); }
  #toast { bottom: calc(92px + env(safe-area-inset-bottom)); font-size: 13px; }
  .calendar-cell { min-height: 57px; aspect-ratio: auto; gap: 5px; padding: 7px 2px; }
  .calendar-cell small { font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
  .calendar-weekday { font-size: 10px; }
  .period-tabs .chip { font-size: 11px; }
  .field { font-size: 12px; }
  .field input, .field select, .field textarea { font-size: 14px; }
}

@media (max-width: 480px) {
  .animal-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .animal-choice { padding: 13px 9px; }
  .animal-choice .safari-elephant { height: 79px; }
  .natural-palette { gap: 17px 8px; }
  .goal-preview { flex-wrap: wrap; justify-content: center; }
  .goal-preview #preview-ring { width: 180px; max-width: 100%; }
  .goal-preview > div:last-child { flex: 1 1 170px; }
}

@media (max-width: 360px) {
  .main { padding-left: 14px; padding-right: 14px; }
  .hero { padding: 20px; }
  .hero h2 { font-size: 22px; }
  .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .summary-card { gap: 14px; }
  .summary-label, .summary-note { font-size: 12px; }
  .goal-grid, .group-grid { grid-template-columns: minmax(0, 1fr); }
  .mobile-nav button { font-size: 10px; }
  .natural-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}