/* Rem-based type and spacing reflow at the chosen size, only on the dashboard. */
html:has(.dashboard-view) {
  font-size: var(--diary-text-size, 100%);
}

diary-text-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.75rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.text-size-label { font-weight: 700; }
.text-size-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.text-size-buttons output { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.text-size-buttons button {
  min-width: 44px;
  min-height: 44px;
  padding: 0.4em 0.65em;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--primary);
  font-weight: 750;
  cursor: pointer;
}
.text-size-buttons button:disabled { opacity: 0.45; cursor: default; }
.text-size-buttons button:hover:not(:disabled) { background: var(--primary-soft); }
.text-size-buttons button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

html:has(.dashboard-view) .app-header { flex-wrap: wrap; }
html:has(.dashboard-view) .brand { max-width: 100%; flex-wrap: wrap; white-space: normal; }
html:has(.dashboard-view) .primary-nav { flex-shrink: 1; flex-wrap: wrap; }
.dashboard-view .section-title,
.dashboard-view .timeline-heading,
.dashboard-view .timeline-toolbar,
.dashboard-view .timeline-card-heading,
.dashboard-view .timeline-entry-actions,
.dashboard-view .insight-card-heading { flex-wrap: wrap; }
.dashboard-view .section-title > *,
.dashboard-view .dashboard-heading > * { min-width: 0; }
.dashboard-view .range-field { max-width: 100%; }
.dashboard-view .range-field select { max-width: 100%; min-width: 0; }
.dashboard-view .quick-card { overflow-wrap: anywhere; }
.dashboard-view .heading-with-help { min-width: 0; }
.dashboard-view .heading-with-help h2 { overflow-wrap: anywhere; }
.dashboard-view .timeline-row-titleline,
.dashboard-view .timeline-row-label small { white-space: normal; overflow-wrap: anywhere; }

html:has(.dashboard-view) .editor { container: diary-editor / inline-size; }
html:has(.dashboard-view) .editor-heading { gap: 0.5rem; }
html:has(.dashboard-view) .close-button { flex-shrink: 0; }
html:has(.dashboard-view) .editor .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:has(.dashboard-view) .editor .field { min-width: 0; line-height: 1.45; }
html:has(.dashboard-view) .editor :is(input, select, textarea) { min-width: 0; max-width: 100%; }
html:has(.dashboard-view) .editor .check-field input { flex-shrink: 0; }
html:has(.dashboard-view) .editor-actions { flex-wrap: wrap; }

/* Native date/time segments can wrap instead of disappearing at larger sizes. */
html:has(.dashboard-view) .editor input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  white-space: normal;
}

@media (min-width: 681px) {
  html:not([data-diary-text-size="100"]) .dashboard-view .quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  }
  html:not([data-diary-text-size="100"]) .dashboard-view .insights-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
}

@container diary-editor (max-width: 30rem) {
  html:has(.dashboard-view) .editor :is(.form-grid, .beverage-picker) { grid-template-columns: minmax(0, 1fr); }
  html:has(.dashboard-view) .editor .full { grid-column: 1 / -1; }
  html:has(.dashboard-view) .editor .scale-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  diary-text-size { justify-content: flex-start; font-size: 1rem; }
  .dashboard-view .quick-card { min-width: 7.25rem; flex-basis: 7.25rem; }
  .dashboard-view .range-field { width: 100%; align-items: stretch; font-size: 1rem; }
  .dashboard-view .range-field select { width: 100%; font-size: 1rem; }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-row-columns { display: none; }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-row-summary {
    grid-template-columns: 34px minmax(0, 1fr) 1rem;
  }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-row-label { grid-column: 2; }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-row-chevron { grid-column: 3; grid-row: 1; }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-volume { grid-column: 2; text-align: left; white-space: normal; }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-volume.in::before { content: "In: "; }
  html:not([data-diary-text-size="100"]) .dashboard-view .timeline-volume.out::before { content: "Out: "; }
  html:has(.dashboard-view) .editor .field,
  html:has(.dashboard-view) .editor .check-field.detailed strong,
  html:has(.dashboard-view) .editor .drink-presets > span { font-size: 1rem; }
  html:has(.dashboard-view) .editor .confidence-popover button > strong { font-size: 1rem; }
  html:has(.dashboard-view) .editor .confidence-popover button > small { font-size: 0.875rem; }
}

@media print {
  html:has(.dashboard-view) { font-size: 100%; }
  diary-text-size { display: none; }
}