/* Theme roles also serve SVG and inline chart colors. Saved preferences win over the dark default. */
:root {
  --surface: #fff;
  --field: #fafaf9;
  --field-border: #cececa;
  --track: #e4e4de;
  --handle: #c5c5be;
  --error: #c8423b;
  --error-soft: #fff0ef;
  --success: #287440;
  --success-soft: #dcefe1;
  --warning: #946c00;
  --warning-soft: #fff4d9;
  --activity: #d58b42;
  --ring-base: #e4e4de;
  --ring-unknown: #a7a79e;
  --ring-steps: #b5a3a6;
  --ring-activities: #afa597;
  --meal-ring-track: #e7e9e2;
  --trend-steps: #b24b72;
  --trend-water: #437ab8;
  --trend-minutes: #b16a32;
  --trend-calories: #d57062;
  --training-run: #d47739;
  --training-strength: #6964ad;
  --training-yoga: #48896b;
  --training-other: #6a777d;
  --chart-excess-tone: black;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171918;
  --card: #212422;
  --surface: #212422;
  --field: #272b28;
  --ink: #f2f3ee;
  --muted: #a7aea8;
  --line: #353a36;
  --field-border: #737c74;
  --track: #353a36;
  --handle: #737c74;
  --brand: #ee6542;
  --brand-ink: #171716;
  --brand-soft: #35241e;
  --brand-strong: var(--brand);
  --error: #ff8a80;
  --error-soft: #442825;
  --success: #92d5a5;
  --success-soft: #20392a;
  --warning: #f6c553;
  --warning-soft: #3c331c;
  --ring-base: var(--track);
  --ring-unknown: #879087;
  --ring-steps: #b5a3a6;
  --ring-activities: #afa597;
  --meal-ring-track: var(--track);
  --trend-steps: var(--pink);
  --trend-water: var(--blue);
  --trend-minutes: var(--activity);
  --trend-calories: var(--protein);
  --training-run: var(--activity);
  --training-strength: #aaa5e9;
  --training-yoga: #83cda6;
  --training-other: #a7b6bc;
  --chart-excess-tone: #f2f3ee;
  --messenger-background: #171918;
  --messenger-dot: #303632;
  --messenger-line: var(--line);
  --messenger-field: var(--field);
  --messenger-field-line: var(--field-border);
  --messenger-bubble: var(--surface);
  --messenger-bubble-line: var(--line);
  --messenger-user-line: #66402f;
  --messenger-sender: var(--muted);
  --messenger-user-sender: var(--brand);
  --messenger-time: var(--muted);
  --messenger-icon: var(--muted);
  --messenger-avatar-line: var(--line);
  --messenger-photo: var(--surface);
  --messenger-photo-line: var(--line);
  --messenger-attachment-line: var(--line);
  --messenger-error: var(--error-soft);
  --messenger-error-line: #8b524c;
  --messenger-recording: var(--error-soft);
  --messenger-recording-ink: var(--error);
  background: var(--paper);
}

html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="dark"] ::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

/* Retain the open diary; only existing raised surfaces get a surface color. */
html[data-theme="dark"] .card {
  background: var(--surface);
  box-shadow: 0 9px 22px #00000018;
}
html[data-theme="dark"] :is(.dashboard, .activity, .progress-button, .meal) {
  background: transparent;
  box-shadow: none;
  border-color: var(--line);
}
html[data-theme="dark"] :is(.activity-grid, .meal-nutrients, .notification-notice) {
  border-color: var(--line);
}
html[data-theme="dark"] .meal-entry > :is(.meal, .favorite-choice) {
  background: var(--paper);
}
html[data-theme="dark"] :is(.chart-card, .profile-card, .product-review-card) {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] :is(#profileDialog, .settings-page) .profile-card {
  background: transparent;
}
html[data-theme="dark"] :is(.track, .meter, .macro-bar) {
  background: var(--track);
}
html[data-theme="dark"] .macro-bar.unknown {
  background: repeating-linear-gradient(135deg, var(--track) 0 3px, var(--paper) 3px 6px);
}
html[data-theme="dark"] .ring {
  background: radial-gradient(var(--card) 0 60%, transparent 61%),
    conic-gradient(var(--ink) var(--progress), var(--track) 0);
}
html[data-theme="dark"] :is(.meal-thumb, .scan-photo-preview figure) {
  background: var(--surface);
}
html[data-theme="dark"] .overview-row .overview-action {
  background: var(--surface);
}
html[data-theme="dark"] :is(.overview-row .overview-action, .burn-entry, .coach-small):hover {
  background: var(--field);
}
html[data-theme="dark"] .overview-row .overview-action:active {
  background: var(--line);
}

/* Secondary reading text was previously spread across hard-coded grey shades. */
/* Inner overflow rounds may reach the central label; keep its text readable. */
html[data-theme="dark"] .calorie-overview.has-overflow .calories :is(b, span) {
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--paper);
  border-radius: 3px;
}
html[data-theme="dark"] :is(
  .calories span, .burn-entry small, .burn-summary span, .budget-legend,
  .quantity-entry > span, .quantity-entry > button, .calendar-jump,
  .macro-grams, .macro-excess-hint, .coach-entry small, .nutrition-complete,
  .coach-header p, .coach-disclosure, .coach-message small, .coach-plan small,
  .coach-hint p, .coach-plan p, .coach-source, .coach-memory small,
  .coach-composer :is(#coachStatus,[data-coach-id="coachStatus"]), .settings-row small, .settings-row > span:last-child,
  .settings-version, .settings-page .helper, .report-response, .goals-date,
  .goals-section .helper, .goals-value p, .nutrient-detail small, .nutrient-detail details
) {
  color: var(--muted);
}
html[data-theme="dark"] :is(#burnDialog .burn-breakdown, #burnDialog .activity-record button,
  .dialog .quantity-entry label, .dialog.tracking-sheet > form > p:not(.hint)) {
  color: var(--muted);
}
html[data-theme="dark"] :is(.settings-page .settings-section p, .settings-page .help-topics p,
  .settings-page .profile-form label:not(.toggle-row)) {
  color: var(--ink);
}
html[data-theme="dark"] .burn-add small {
  color: var(--brand-ink);
}

/* Water, movement and nutrition keep their established semantic colors. */
html[data-theme="dark"] :is(.tracking-open .activity-title.pink, .activity-grid .add.pink) {
  color: var(--pink);
}
html[data-theme="dark"] :is(.tracking-open .activity-title.blue, .activity-grid .add.blue) {
  color: var(--blue);
}
html[data-theme="dark"] :is(.activity-orange, .tracking-open .activity-title.activity-orange,
  .activity-grid .add.activity-orange, .burn-entry svg) {
  color: var(--activity);
}
html[data-theme="dark"] .budget-legend span::before {
  background: var(--ring-base);
}
html[data-theme="dark"] .budget-legend .steps::before {
  box-shadow: inset 0 0 0 1.5px var(--pink);
}
html[data-theme="dark"] .budget-legend .activities::before {
  box-shadow: inset 0 0 0 1.5px var(--activity);
}

/* Dark surfaces include native dialogs, rather than inheriting the UA white. */
html[data-theme="dark"] .dialog {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 55px #0006;
}
html[data-theme="dark"] .dialog::backdrop {
  background: #0009;
}
html[data-theme="dark"] :is(.dialog.fullscreen, .dialog.correction, .coach-settings,
  .goals-dialog, #onboardingDialog, :is(#coachDialog,[data-coach-id="coachDialog"]), #mealDetailDialog, #mealDetailDialog[open]) {
  background: var(--paper);
}
html[data-theme="dark"] :is(#coachDialog,[data-coach-id="coachDialog"]) > .dialog-handle { background: var(--messenger-background); }
html[data-theme="dark"] :is(.dialog .dialog-handle, .dialog .page-back.dialog-handle) {
  background: var(--surface);
}
html[data-theme="dark"] .dialog:is(.fullscreen, .correction, .settings-page, .coach-settings,
  .goals-dialog) .dialog-handle {
  background: var(--paper);
}
html[data-theme="dark"] :is(.handle, .dialog .dialog-handle > span, .scan-handle span) {
  background: var(--handle);
}
html[data-theme="dark"] #scanDialog,
html[data-theme="dark"] #scanDialog .scan-handle,
html[data-theme="dark"] #mealDetailDialog > .dialog-handle {
  background: transparent;
  box-shadow: none;
}
html[data-theme="dark"] #scanDialog::backdrop {
  background: transparent;
}
html[data-theme="dark"] #mealDetailDialog > .dialog-handle > span {
  background-color: #ffffffc9;
}
html[data-theme="dark"] #mealDetailDialog.no-photo > .dialog-handle > span {
  background-color: var(--handle);
}
html[data-theme="dark"] :is(.dialog.photo-viewer, .messenger-photo-viewer) {
  background: #111;
  color: #fff;
}
html[data-theme="dark"] .dialog.photo-viewer .dialog-handle {
  background: transparent;
}

/* The border is functional: at least 3:1 against the adjacent dark fields. */
html[data-theme="dark"] .dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea, select),
html[data-theme="dark"] .dialog:is(.settings-page, .coach-settings, .tracking-sheet)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select),
html[data-theme="dark"] #onboardingDialog .ob-field :is(input, select) {
  background-color: var(--field);
  border-color: var(--field-border);
  color: var(--ink);
}
html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}
html[data-theme="dark"] .dialog :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus,
html[data-theme="dark"] .dialog:is(.settings-page, .coach-settings, .tracking-sheet)
  :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus,
html[data-theme="dark"] #onboardingDialog .ob-field :is(input, select):focus {
  background-color: var(--field);
  border-color: var(--brand);
}
html[data-theme="dark"] .dialog:is(.settings-page, .coach-settings) select,
html[data-theme="dark"] #onboardingDialog .ob-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a7aea8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--brand);
}
html[data-theme="dark"] :is(button, summary, a, input, textarea, select):focus-visible {
  outline-color: var(--brand);
}
html[data-theme="dark"] .calendar-jump:focus-within {
  outline-color: var(--brand);
}
html[data-theme="dark"] :is(.secondary, .row-button, .outline-button, .microphone-button) {
  background: var(--field);
  color: var(--ink);
}
html[data-theme="dark"] .outline-button {
  border-color: var(--field-border);
}
html[data-theme="dark"] .microphone-button:hover {
  background: var(--line);
}
html[data-theme="dark"] :is(.primary, :is(#favoriteDraftBar,[data-detail-id="favoriteDraftBar"]) button) {
  background: var(--brand);
  color: var(--brand-ink);
}
html[data-theme="dark"] :is(.voice, .quick-values button) {
  background: #23324b;
  color: var(--blue);
}
html[data-theme="dark"] .pink-values button {
  background: #3b2430;
  color: var(--pink);
}

/* The floating controls keep their translucency and exact logo orange. */

html[data-theme="dark"] .meal-actions :is(#addButton, #quickFavoritesButton):active {
  background: var(--field);
}
html[data-theme="dark"] .meal-actions #quickCameraButton {
  background: var(--brand);
  color: #fff;
}
html[data-theme="dark"] :is(.toast, #mealSwipeHint) {
  background: var(--field);
  color: var(--ink);
  box-shadow: 0 4px 18px #0005;
}

/* Calendar day states remain independent of the brand/action accent. */
html[data-theme="dark"] .day {
  color: var(--muted);
}
html[data-theme="dark"] .day.active {
  color: var(--ink);
}
html[data-theme="dark"] .day.active:not([data-status]) b {
  background: var(--ink);
  color: var(--paper);
}
html[data-theme="dark"] .day[data-status="empty"] b {
  background: var(--surface);
  color: var(--muted);
}
html[data-theme="dark"] .day[data-status="within"] b {
  background: var(--success-soft);
  color: var(--success);
}
html[data-theme="dark"] .day[data-status="over"] b {
  background: var(--error-soft);
  color: var(--error);
}

/* Semantics, review badges and errors use readable dark counterparts. */
html[data-theme="dark"] :is(.source-badge, .analysis-trace-event span) {
  background: var(--field);
  color: var(--muted);
}
html[data-theme="dark"] .source-etikett {
  background: var(--success-soft);
  color: var(--success);
}
html[data-theme="dark"] :is(.source-barcode, .scan-feedback[data-kind="info"]) {
  background: #23324b;
  color: var(--blue);
}
html[data-theme="dark"] .source-produktdatenbank {
  background: #302940;
  color: #c4adee;
}
html[data-theme="dark"] .source-kandidat {
  background: var(--warning-soft);
  color: var(--warning);
}
html[data-theme="dark"] .source-ki-schaetzung {
  background: #342a32;
  color: #d2b4c5;
}
html[data-theme="dark"] :is(.row-button.accent, .danger-button, .scan-feedback,
  .remove-ingredient, .activity-record button, .analysis-trace-event.error span) {
  background: var(--error-soft);
  color: var(--error);
}
html[data-theme="dark"] .confirmation-sheet .confirm-danger {
  background: var(--error);
  color: var(--brand-ink);
}
html[data-theme="dark"] :is(#remaining.over-budget, .home-day-preview [data-home-id="remaining"].over-budget,
  .coach-error, #ingredientDialog .ingredient-error) {
  color: var(--error);
}
html[data-theme="dark"] #onboardingError {
  color: var(--error) !important;
}
html[data-theme="dark"] .analysis-trace-event {
  background: var(--surface);
}
html[data-theme="dark"] .analysis-trace-event.error {
  border-color: var(--error);
}
html[data-theme="dark"] :is(.analysis-trace-event pre, .feedback-preview) {
  background: var(--field);
  color: var(--ink);
}
html[data-theme="dark"] :is(.coach-achievement, .progress-badges span) {
  color: var(--success);
}
html[data-theme="dark"] .progress-badges span {
  background: var(--success-soft);
}
html[data-theme="dark"] .coach-week-progress span {
  background: var(--track);
}
html[data-theme="dark"] .coach-week-progress span.recorded {
  background: var(--success);
}

/* Ingredient rows stay transparent; only their quantity field is raised. */
html[data-theme="dark"] .ingredient-card {
  background: var(--surface);
}
html[data-theme="dark"] #ingredientDialog .ingredient-card {
  background: transparent;
}
html[data-theme="dark"] #ingredientDialog .ingredient-amount-control,
html[data-theme="dark"] #ingredientDialog .ingredient-amount-control:focus-within {
  background: var(--field);
  border-color: var(--field-border);
}
html[data-theme="dark"] #ingredientDialog .ingredient-amount-control:focus-within {
  border-color: var(--brand);
}
html[data-theme="dark"] #ingredientDialog .ingredient-grams {
  background: transparent;
}
html[data-theme="dark"] #ingredientDialog .ingredient-step {
  background: var(--field);
  border-color: var(--field-border);
}
html[data-theme="dark"] #ingredientDialog .ingredient-step:active {
  background: var(--surface);
}
html[data-theme="dark"] #ingredientDialog .remove-ingredient {
  background: transparent;
  color: var(--muted);
}
html[data-theme="dark"] #ingredientDialog .remove-ingredient:active {
  background: var(--error-soft);
  color: var(--error);
}
html[data-theme="dark"] .ingredient-macros label:nth-child(2) {
  color: var(--fat);
}

/* Onboarding follows the same open form and palette as profile/settings. */
html[data-theme="dark"] #onboardingDialog :is(.ob-navigation, .ob-intro, .ob-option small,
  .ob-field > small, .ob-number > span, .ob-small, .ob-help, .ob-help p,
  .ob-calories > span, .ob-macros small, .ob-timeline small, .ob-budget-note,
  .ob-review-row small, .ob-movement-result span) {
  color: var(--muted);
}
html[data-theme="dark"] #onboardingDialog .ob-navigation button {
  color: var(--ink);
}
html[data-theme="dark"] #onboardingDialog .dialog-handle span {
  background: var(--handle);
}
html[data-theme="dark"] #onboardingDialog .ob-option {
  background: var(--surface);
  border-color: var(--field-border);
}
html[data-theme="dark"] #onboardingDialog .ob-option i {
  background: var(--field);
  border-color: var(--field-border);
}
html[data-theme="dark"] #onboardingDialog .ob-option:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
}
html[data-theme="dark"] #onboardingDialog .ob-option:has(input:checked) i {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 4px var(--brand-soft);
}
html[data-theme="dark"] #onboardingDialog .ob-option:has(input:focus-visible) {
  outline-color: var(--brand);
}
html[data-theme="dark"] #onboardingDialog .ob-field input[aria-invalid="true"] {
  border-color: var(--error);
}
html[data-theme="dark"] #onboardingDialog :is(.ob-footer, .ob-review-row) {
  border-color: var(--line);
}
html[data-theme="dark"] #onboardingDialog .ob-notice {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning);
}
html[data-theme="dark"] #onboardingProgress,
html[data-theme="dark"] #onboardingProgress::-webkit-progress-bar {
  background: var(--track);
}
html[data-theme="dark"] .profile-onboarding .row-button {
  background: transparent;
}

/* Meal details use the background; the photo pixels are never recolored. */
html[data-theme="dark"] #mealDetailDialog :is(.detail-sheet, .no-photo .photo-stage) {
  background: var(--paper);
}
html[data-theme="dark"] #mealDetailDialog.no-photo .photo-stage {
  background: var(--paper);
}
html[data-theme="dark"] #mealDetailDialog :is(.meal-detail-meta, .meal-calorie-unit,
  .meal-nutrition-macros .macro-input label, .detail-grid label, .stat-label,
  .meal-chat-empty, .meal-options) {
  color: var(--muted);
}
html[data-theme="dark"] #mealDetailDialog .meal-weight-divider {
  background: var(--line);
}
html[data-theme="dark"] #mealDetailDialog .meal-chat-empty {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] #mealDetailDialog .ingredient-stat:hover {
  background: var(--surface);
}
html[data-theme="dark"] #mealDetailDialog > .dialog-handle:focus-visible > span {
  outline-color: var(--brand);
}
html[data-theme="dark"] #mealDetailDialog :is(:is(#mealName,[data-detail-id="mealName"]), :is(#mealCalories,[data-detail-id="mealCalories"]),
  .meal-nutrition-macros .macro-input input) {
  background: transparent;
  color: var(--ink);
}
html[data-theme="dark"] #mealDetailDialog :is(#mealCalories,[data-detail-id="mealCalories"])::placeholder {
  color: var(--ink);
}
html[data-theme="dark"] #mealDetailDialog .detail-macro-bar {
  background: var(--track);
}
html[data-theme="dark"] :is(#mealDetailDialog,.plan-shopping-entry) .meal-ingredients-link {
  color: var(--brand);
}
html[data-theme="dark"] #mealDetailDialog .detail-portion {
  background: transparent;
  border-color: var(--line);
}
html[data-theme="dark"] #mealDetailDialog .detail-portion .portion {
  background: transparent;
}
html[data-theme="dark"] #mealDetailDialog .detail-portion .portion::before {
  background: var(--surface);
}
html[data-theme="dark"] #mealDetailDialog .detail-portion .portion button {
  background: var(--field);
  border-color: var(--field-border);
}
/* Photo buttons inherit the shared outlined circle. */
html[data-theme="dark"] #mealDetailDialog :is(.row-button, .meal-chat-heading) {
  background: transparent;
  border-color: var(--line);
}
html[data-theme="dark"] #mealDetailDialog .source-badge {
  background: transparent;
  color: var(--muted);
}

/* Messenger colors use the same semantic roles in every chat. */
html[data-theme="dark"] .avatar-settings-preview { background: var(--brand-soft); border-color: var(--line); }
html[data-theme="dark"] .chat-waiting .chat-waiting-note { color: var(--muted); }
html[data-theme="dark"] :is(#coachDialog,[data-coach-id="coachDialog"]) .meal-chat-bubble .coach-feedback button {
  background: var(--field);
  border-color: var(--field-border);
}
html[data-theme="dark"] :is(#coachDialog,[data-coach-id="coachDialog"]) .meal-chat-bubble .coach-feedback button[aria-pressed="true"] {
  background: var(--success-soft);
  border-color: var(--success);
}
html[data-theme="dark"] .meal-chat-empty {
  background: var(--surface);
}
html[data-theme="dark"] .coach-feedback button[aria-pressed="true"] {
  background: var(--field);
  border-color: var(--ink);
}
html[data-theme="dark"] .meal-composer-dock { background: var(--paper); border-color: var(--line); }
html[data-theme="dark"] #scanDialog #voicePreview {
  background: var(--surface);
}
html[data-theme="dark"] #scanDialog label,
html[data-theme="dark"] #scanDialog .voice {
  color: var(--muted);
}
html[data-theme="dark"] #scanDialog .scan-handle span {
  background: var(--handle);
}
html[data-theme="dark"] .scan-add-photo {
  background: var(--field);
  color: var(--muted);
  border-color: var(--field-border);
}
html[data-theme="dark"] .scan-add-photo:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}
html[data-theme="dark"] .scan-camera-badge circle {
  fill: var(--field);
  stroke: var(--field-border);
}
html[data-theme="dark"] .scan-camera-badge path {
  stroke: var(--muted);
}
html[data-theme="dark"] .favorite-picker-button {
  color: var(--ink);
}

/* The assistant's inline setup uses plain controls as well as chat bubbles. */
html[data-theme="dark"] :is(#coachInlineControls,[data-coach-id="coachInlineControls"]) .assistant-onboarding-controls button:disabled {
  opacity: .55;
}
html[data-theme="dark"] :is(#coachInlineControls,[data-coach-id="coachInlineControls"]) .assistant-onboarding-controls
  :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background-color: var(--field);
  color: var(--ink);
  border-color: var(--field-border);
}
html[data-theme="dark"] :is(#coachInlineControls,[data-coach-id="coachInlineControls"]) .assistant-onboarding-controls
  :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: var(--brand);
}
html[data-theme="dark"] :is(#coachInlineControls,[data-coach-id="coachInlineControls"]) .assistant-onboarding-controls
  :is(label, p:not(.helper)) {
  color: var(--ink);
}
html[data-theme="dark"] :is(#coachInlineControls,[data-coach-id="coachInlineControls"]) .assistant-onboarding-controls .helper {
  color: var(--muted);
}
html[data-theme="dark"] :is(#coachInlineControls,[data-coach-id="coachInlineControls"]) [role="alert"] {
  color: var(--error);
}
html[data-theme="dark"] :is(#coachInlineControls,[data-coach-id="coachInlineControls"]) .assistant-onboarding-controls
  :is(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--error);
}

/* Statistics: dark chart tracks, missing-data patterns and selected states. */
html[data-theme="dark"] #progressDialog :is(.progress-period, .progress-training-mix) {
  background: var(--track);
}
html[data-theme="dark"] #progressDialog .progress-period button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
html[data-theme="dark"] #progressDialog .progress-trend {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] #progressDialog .progress-metric-tabs button {
  color: var(--muted);
}
html[data-theme="dark"] #progressDialog .progress-metric-tabs button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--trend-color) 12%, var(--surface));
  color: var(--trend-color);
}
html[data-theme="dark"] #progressDialog :is(.progress-date-range, .progress-intro p,
  .progress-trend-value span, .progress-trend-comparison, .progress-scale, .progress-axis,
  .progress-chart-legend, .progress-day-activities, .progress-section-heading > span,
  .progress-training-total > span, .progress-training-row > span, .progress-training-plan,
  .progress-habit > span, .progress-habit small, .progress-caption,
  .progress-nutrition-calories span, .progress-nutrition-row small, .progress-data-note,
  .progress-section > p) {
  color: var(--muted);
}
html[data-theme="dark"] #progressDialog :is(.progress-chart, .progress-section, .progress-habits) {
  border-color: var(--line);
}
html[data-theme="dark"] #progressDialog .progress-column .missing i {
  background: repeating-linear-gradient(135deg, var(--handle) 0 2px, transparent 2px 4px);
}
html[data-theme="dark"] #progressDialog .progress-target-line {
  border-color: var(--handle);
}
html[data-theme="dark"] .progress-section progress {
  accent-color: var(--success);
}
html[data-theme="dark"] #progressDialog .progress-habit-days i {
  background: color-mix(in srgb, var(--habit-color) 22%, var(--surface));
}
html[data-theme="dark"] #progressDialog .progress-habit-days .met {
  background: var(--habit-color);
}
html[data-theme="dark"] #progressDialog .progress-habit-days .missing {
  background: var(--track);
}

/* One outlined-circle role shared by floating actions, shopping and ingredient links. */
:root{--outline-circle-background:rgba(245,245,243,.9)}
html[data-theme="dark"]{--outline-circle-background:rgb(33 36 34 / 90%)}
:root :is(button,span,input).brand-outline-circle{display:grid;place-items:center;padding:0;border:1px solid var(--brand);border-radius:50%;background:var(--outline-circle-background);color:var(--brand)}
.brand-outline-circle svg{display:block;flex:none}
:root button.brand-outline-circle:active{background:var(--field)}

#mealDetailDialog .photo-actions button.brand-outline-circle{border:1px solid var(--brand);background:var(--outline-circle-background);color:var(--brand)}
#mealDetailDialog .photo-actions button.brand-outline-circle svg{width:22px;height:22px;stroke-width:1.5}