/* Material chart, diary-date and appearance additions. Product colors are semantic. */
.app-title { font-weight: 600; line-height: 1.333333; }
h2 { font-weight: 600; line-height: 1.4; }
.primary-button, .outlined-button, .text-button, .field label, .field legend { font-weight: 600; }
.confirm-dialog { background: var(--surface-elevated); }
.journal-header-actions { margin-left: auto; }
.day-controls { gap: var(--space-2); container-type: inline-size; container-name: journal-date; }
.journal-day-header { flex-wrap: wrap; }
.journal-today-slot { display: flex; align-items: center; justify-content: flex-end; min-width: 6rem; min-height: var(--touch); }
.today-status { display: flex; align-items: center; justify-content: flex-end; min-height: var(--touch); color: var(--muted); padding-inline: var(--space-4); }
.journal-day-row { display: grid; grid-template-columns: var(--touch) minmax(0,1fr) var(--touch); align-items: center; gap: var(--space-2); }
.journal-date-button { display: flex; justify-content: center; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--touch); border: 0; border-radius: var(--radius-field); background: transparent; color: var(--fg); font-weight: 600; padding: var(--space-2) var(--space-1); font-variant-numeric: tabular-nums; }
.journal-date-button > span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.journal-date-button .icon { width: 20px; height: 20px; }
.spend-modes.three-modes { grid-template-columns: repeat(3,minmax(0,1fr)); }
.insight-section { display: grid; gap: var(--space-3); min-width: 0; padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.insight-section .insight-section { border-bottom: 0; padding-block: var(--space-2); }
.overview-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.overview-stats strong { display: block; font-weight: 600; font-size: clamp(1.5rem,8vw,2rem); line-height: 1.3; }
.chart-page-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chart-page-controls > button { flex: 1 1 8rem; }
.chart-scale, .chart-window { color: var(--chart-label); }
.analytics-plot { display: block; width: 100%; height: auto; aspect-ratio: 640 / 208; overflow: visible; }
.chart-axis { fill: none; stroke: var(--chart-axis); stroke-width: 1.5; }
.chart-column { fill: var(--accent-mark); }
.allergy-series .chart-column, .allergy-series .horizontal-fill { fill: var(--allergy-mark); background: var(--allergy-mark); }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-point { cursor: pointer; }
.chart-zero-mark { fill: var(--surface); stroke: var(--chart-empty); stroke-width: 2; }
.chart-missing-mark { fill: none; stroke: var(--chart-missing); stroke-width: 2; }
.chart-selection { fill: none; stroke: var(--fg); stroke-width: 1.5; pointer-events: none; opacity: 0; }
.chart-point.selected .chart-selection { opacity: 1; }
.chart-point:focus-visible { outline: none; }
.chart-point:focus-visible .chart-hit { fill: var(--accent-soft); stroke: var(--focus-color); stroke-width: 2; }
.chart-point.selected .chart-column { stroke: var(--fg); stroke-width: 1; }
.chart-end-labels { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); color: var(--chart-label); font-variant-numeric: tabular-nums; }
.chart-end-labels > span { display: block; }
.chart-readout { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-field); }
.chart-readout .text-button { align-self: flex-start; }
.chart-data-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.chart-data-table th { padding-block: var(--space-3); text-align: left; color: var(--muted); font-weight: 600; }
.chart-data-table td { padding: 0; vertical-align: top; }
.chart-table-row { display: grid; width: 100%; min-height: var(--touch); gap: var(--space-1); padding: var(--space-3) 0; text-align: left; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--border); }
.chart-table-row strong { font-variant-numeric: tabular-nums; }
.inline-link { color: var(--accent-on); font-weight: 600; }
.horizontal-series { display: grid; gap: var(--space-2); }
.horizontal-item { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: var(--touch); padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--fg); text-align: left; }
.horizontal-item > span { display: block; }
.horizontal-item > .od-row { display: flex; flex-wrap: wrap; align-items: center; }
.horizontal-track { display: flex !important; align-items: center; min-height: var(--space-4); width: 100%; border-bottom: 1px solid var(--chart-axis); }
.horizontal-fill { display: block; width: var(--bar-size); height: var(--space-3); background: var(--accent-mark); border-radius: var(--space-1); }
.horizontal-empty { display: block; width: var(--space-2); height: var(--space-2); border: 1px solid var(--chart-empty); border-radius: 50%; }
.horizontal-empty.missing { width: var(--space-3); height: var(--space-3); border-radius: 0; border: 2px dashed var(--chart-missing); }
.overview-calendar-scroll { max-width: 100%; overflow-x: auto; padding-block: var(--space-1); }
.overview-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-width: var(--touch); min-height: var(--touch); padding: var(--space-2) var(--space-1); background: transparent; color: var(--fg); border: 1px solid transparent; border-radius: var(--radius-field); font-variant-numeric: tabular-nums; }
.overview-day.has-events { background: var(--allergy-container); }
.event-count-mark { display: flex; align-items: center; justify-content: center; min-width: 1.5em; min-height: 1.5em; border-radius: 50%; border: 1px solid var(--allergy-mark); color: var(--allergy-on); font-weight: 600; }
.allergy-legend-dot { display: inline-block; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--allergy-mark); }
.overview-day.selected { border: 2px solid var(--focus-color); }
.overview-day.today > span:first-child { text-decoration: underline; text-underline-offset: var(--space-1); }
.overview-day:disabled { opacity: .62; cursor: default; background: var(--bg); }
.day-state { color: var(--muted); font-size: var(--text-sm); }
.detail-days { gap: var(--space-4); }
.insight-day { padding-block: var(--space-4); border-bottom: 1px solid var(--border); gap: var(--space-3); }
.detail-event { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.detail-event > strong { color: var(--allergy-mark); }
.read-only-meal { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.detail-period { font-weight: 600; font-variant-numeric: tabular-nums; }
.appearance-screen { gap: var(--space-4); }
.appearance-modes { display: flex; flex-direction: column; gap: var(--space-2); }
.appearance-modes .choice { flex: none; }
.appearance-accent { gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.accent-seed-swatch { display: block; width: var(--space-8); height: var(--space-8); flex: none; background: var(--seed); border: 1px solid var(--control-border); border-radius: 50%; }
.color-dialog input[type=color] { display: block; width: 100%; min-height: var(--touch); padding: var(--space-1); border: 1px solid var(--control-border); border-radius: var(--radius-field); background: var(--surface); }
.theme-preview-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap: var(--space-3); }
.theme-preview { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-field); background: var(--surface); color: var(--fg); }
.preview-button { display: flex; min-height: var(--touch); padding: var(--space-2); align-items: center; justify-content: center; border-radius: var(--radius-button); background: var(--accent); color: var(--accent-on); font-weight: 600; }
.preview-tab { display: block; padding: var(--space-2); border-bottom: 3px solid var(--accent-mark); font-weight: 600; color: var(--accent-on); background: var(--accent-soft); }
.preview-chart { display: flex; align-items: flex-end; min-height: 64px; gap: var(--space-2); border-bottom: 1px solid var(--chart-axis); }
.preview-chart > span { display: block; width: var(--space-6); background: var(--accent-mark); height: var(--space-6); }
.preview-chart > span:nth-child(2) { height: var(--space-12); }
.preview-chart > span:nth-child(3) { height: var(--space-8); }
.preview-allergy { color: var(--allergy-mark); }
.warning { color: var(--warning); }
button:disabled { cursor: not-allowed; }
.choice:has(input:focus-visible), .switch-row:has(input:focus-visible) { outline-color: var(--focus-color); }
.file-control:focus-within .file-label { outline-color: var(--focus-color); }
.record-row .price { display: block; max-width: 100%; overflow-x: auto; }
.journal-date-button:active, .horizontal-item:active, .chart-table-row:active, .overview-day:not(:disabled):active { background: var(--accent-soft); }
.overview-day.has-events:active { background: var(--allergy-container); border-color: var(--allergy-mark); }
@container journal-date (max-width: 20rem) {
  .journal-date-button > .icon { display: none; }
}
@container journal-date (max-width: 16rem) {
  .journal-day-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .journal-date-button { grid-column: 1 / -1; grid-row: 1; }
  .journal-day-row > .icon-button { grid-row: 2; }
  .journal-day-row > .icon-button:first-child { justify-self: start; }
  .journal-day-row > .icon-button:last-child { justify-self: end; }
}
[data-theme=dark] .presentation-note, [data-theme=dark] .presentation-heading { color: var(--muted); }
:where(.choice,.switch-row,.file-control):focus-within { outline-color: var(--focus-color); }
@container (max-width: 20rem) { .spend-modes.three-modes { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 375px) {
  .journal-date-button > .picker-chevron { display: none; }
  .journal-day-row { gap: var(--space-1); }
}
@media (hover: hover) {
  .journal-date-button:hover, .horizontal-item:hover, .chart-table-row:hover { background: var(--accent-soft); }
  .overview-day:not(:disabled):hover { border-color: var(--focus-color); }
}