/* ---------- auth ---------- */

.auth {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 2 * var(--space-8));
}

.auth-card {
  width: min(420px, 100%);
}

.auth-card .brand {
  justify-content: center;
  padding-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.auth-card .brand svg {
  width: 36px;
  height: 36px;
}

/* ---------- food log ---------- */

.date-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.date-picker {
  position: relative;
  display: inline-flex;
}

.date-picker .btn {
  min-width: 150px;
}

.date-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.meal {
  padding-block: var(--space-2);
}

.meal + .meal {
  border-top: 1px solid var(--border);
}

.meal-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
}

.meal-header h2 {
  font-size: var(--text-base);
}

.meal-header .meal-kcal {
  color: var(--text-2);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.meal-header .btn {
  margin-left: auto;
}

.entry-kcal {
  font-weight: 600;
}

/* ---------- add food ---------- */

.search-box {
  position: relative;
}

.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  color: var(--text-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-box .input {
  padding-left: 42px;
}

.search-results [aria-selected="true"] {
  background: var(--surface-2);
}

.food-detail {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.nutrition-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  text-align: center;
}

.nutrition-preview .value {
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nutrition-preview .label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* ---------- weight ---------- */

.range-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.delta-down {
  color: var(--accent);
}

.delta-up {
  color: var(--warning);
}

/* ---------- recipes ---------- */

.ingredient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(90px, 150px) var(--touch);
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

@media (max-width: 560px) {
  .ingredient-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) var(--touch);
  }

  .ingredient-row .ingredient-name {
    grid-column: 1 / -1;
  }
}

.ingredient-row + .ingredient-row {
  border-top: 1px solid var(--border);
}

/* ---------- coach ---------- */

.checkin {
  border-color: var(--accent);
}

.target-change {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.target-change .from {
  color: var(--text-3);
  text-decoration: line-through;
}

.target-change .to {
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* ---------- settings ---------- */

.settings-section h2 {
  margin-bottom: var(--space-1);
}

.danger-zone {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

/* ---------- connected apps (P6) ---------- */

.integration-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.integration {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border);
}

.integration:first-child {
  border-top: 0;
  padding-top: 0;
}

.integration-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.integration-main > .grow {
  flex: 1 1 16rem;
  min-width: 0;
}

.integration-name {
  font-size: var(--text-base);
  margin: 0;
}

.integration-actions {
  gap: var(--space-2);
}

.integration-status.tone-ok {
  color: var(--text-2);
}

.integration-status.tone-busy {
  color: var(--accent-strong);
}

.integration-status.tone-warning {
  color: var(--warning);
}

.integration-status.tone-error {
  color: var(--danger);
}

.integration-events summary {
  cursor: pointer;
  color: var(--text-2);
}

.integration-events .list-row {
  align-items: flex-start;
  gap: var(--space-3);
}

/* ---------- food log (P2) ---------- */

.day-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.day-tools {
  gap: var(--space-1);
  margin-inline: calc(-1 * var(--space-2));
}

.day-tools .btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.list-row.selectable {
  cursor: pointer;
}

.list-row.selectable input,
.meal-select {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}

.list-row.is-pending {
  opacity: 0.7;
}

.selection-bar {
  position: sticky;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-3));
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 900px) {
  .selection-bar {
    bottom: var(--space-4);
  }
}

.selection-count {
  margin-right: auto;
  font-weight: 600;
  font-size: var(--text-sm);
}

.meal-setting .btn-icon:disabled {
  visibility: hidden;
}

/* ---------- water ---------- */

.water-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.water-card h2 {
  font-size: var(--text-base);
  gap: var(--space-2);
}

.water-card h2 svg {
  width: 20px;
  height: 20px;
  color: var(--protein);
}

.water-bar {
  width: 100%;
  height: 8px;
}

.water-bar .track {
  fill: var(--surface-2);
}

.water-bar .fill {
  fill: var(--protein);
}

/* ---------- body ---------- */

.measurement-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.metrics-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.input-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.input-pair .input-group .input {
  padding-right: 40px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: #fff;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-thumb span {
  position: absolute;
  inset: auto 0 0;
  padding: 2px 6px;
  background: linear-gradient(transparent, rgb(0 0 0 / 60%));
  text-align: left;
}

.photo-thumb.is-chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.photo-preview img {
  max-height: 240px;
  border-radius: var(--radius);
}

.dialog.photo-dialog {
  width: min(900px, calc(100% - 32px));
}

@media (max-width: 600px) {
  .dialog.photo-dialog {
    width: 100%;
  }
}

.photo-full {
  margin: 0;
}

.photo-full img {
  width: 100%;
  height: auto;
  max-height: 70dvh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.compare-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.compare-side figure {
  margin: 0;
}

.compare-side img,
.compare-stack img {
  width: 100%;
  height: auto;
  max-height: 65dvh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.compare-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compare-stack {
  position: relative;
}

.compare-stack .overlay {
  position: absolute;
  inset: 0;
}

.compare-slider input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* ---------- time charts ---------- */

.chart .series-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .series-line.primary {
  stroke: var(--chart-trend);
}

.chart .series-line.dashed {
  stroke: var(--text-3);
  stroke-dasharray: 5 4;
  stroke-width: 2;
}

.chart .series-dot.primary {
  fill: var(--chart-trend);
}

.chart .series-dot.dashed {
  fill: var(--text-3);
}

.chart .zero-line {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--chart-trend);
}

.legend-swatch.dashed {
  background: var(--text-3);
}

/* ---------- insights ---------- */

.weekday-chart {
  margin: 0;
}

.weekday-chart svg {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.weekday-chart .bar {
  fill: var(--calories);
  opacity: 0.75;
}

.weekday-chart .target-tick {
  stroke: var(--text);
  stroke-width: 2;
}

.weekday-chart .bar-label,
.weekday-chart .bar-value {
  fill: var(--text-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.nutrient-row {
  padding-block: var(--space-2);
}

.nutrient-row .grow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nutrient-row svg {
  width: 100%;
  height: 8px;
}

.nutrient-row .track {
  fill: var(--surface-2);
}

.nutrient-row .fill {
  fill: var(--accent);
}

.nutrient-row .fill.status-low {
  fill: var(--warning);
}

.nutrient-row .fill.status-high {
  fill: var(--danger);
}

.nutrient-row .goal-mark {
  stroke: var(--text);
  stroke-width: 1.5;
}

.nutrient-row .meta {
  font-size: var(--text-xs);
  color: var(--text-2);
}

.heatmap-scroll {
  overflow-x: auto;
}

.heatmap .cell {
  fill: var(--surface-2);
}

.heatmap .cell.logged {
  fill: var(--accent);
  opacity: 0.8;
}

.heatmap .weighed {
  fill: var(--surface);
}

.heatmap .heatmap-label {
  fill: var(--text-3);
  font-size: 9px;
}

.legend-cell {
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
}

.legend-dot {
  width: 8px !important;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

/* ---------- AI drafts ---------- */

.stack-xs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.select-sm {
  min-height: 36px;
  width: auto;
  padding: 4px 28px 4px 10px;
  font-size: var(--text-sm);
}

.dialog.draft-dialog {
  width: min(640px, calc(100% - 32px));
}

@media (max-width: 600px) {
  .dialog.draft-dialog {
    width: 100%;
  }
}

.draft-dialog .dialog-footer {
  align-items: center;
}

.draft-row {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.draft-row.is-excluded .grow {
  opacity: 0.5;
}

.draft-include {
  display: flex;
  padding-top: 2px;
}

.draft-include input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.draft-warning {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  color: var(--warning);
}

.draft-warning svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}

.draft-actions {
  gap: var(--space-3);
  margin-top: var(--space-1);
}

/* ---------- suggestions and plans ---------- */

.suggestions-card h2 {
  font-size: var(--text-base);
  gap: var(--space-2);
}

.suggestions-card h2 svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.suggestion .title,
.suggestion .meta {
  display: block;
}

.suggestion .title {
  font-weight: 600;
}

.suggestion .meta {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.plan-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
}

.plan-item .grow {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 200px;
}

.plan-item .title {
  font-weight: 600;
}

.plan-item .meta {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.plan-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.plan-item-actions [aria-pressed="true"] {
  color: var(--accent);
}

.plan-item.is-logged .grow {
  opacity: 0.7;
}