/*
 * WellEcho visual themes
 *
 * Keeps the approved Porcelain Ink component geometry and semantic chart
 * colors, while swapping only brand, neutral material and logo colors.
 */

html[data-brand-theme="quiet-aurora-teal"] {
  --theme-page: #f2f6f8;
  --theme-page-end: #f7fafb;
  --theme-surface: #ffffff;
  --theme-surface-raised: #f9fbfc;
  --theme-surface-soft: #e6eff2;
  --theme-control-pressed: #d7e8ec;
  --theme-ink: #10202d;
  --theme-ink-soft: #344c57;
  --theme-muted: #526873;
  --theme-faint: #667981;
  --theme-line: #cfdde2;
  --theme-line-strong: #abc4cc;
  --theme-primary: #267a8c;
  --theme-primary-strong: #185f70;
  --theme-primary-soft: #d9ecef;
  --theme-primary-wash: rgb(38 122 140 / 0.11);
  --theme-focus: #267a8c;
  --theme-focus-rgb: 38 122 140;
  --theme-gradient-left: #267a8c;
  --theme-gradient-right: #185f70;
  --theme-camera: #102a33;
  --theme-on-primary: #ffffff;
  --theme-on-gradient: #ffffff;
  --theme-shadow-rgb: 16 32 45;
}

html[data-brand-theme="sage-mineral"] {
  --theme-page: #f2f5f1;
  --theme-page-end: #f7f9f6;
  --theme-surface: #ffffff;
  --theme-surface-raised: #f8faf7;
  --theme-surface-soft: #e7eee8;
  --theme-control-pressed: #dbe6dd;
  --theme-ink: #21372c;
  --theme-ink-soft: #41594c;
  --theme-muted: #5e6f65;
  --theme-faint: #718078;
  --theme-line: #d5ddd6;
  --theme-line-strong: #b7c6bb;
  --theme-primary: #587565;
  --theme-primary-strong: #405a4d;
  --theme-primary-soft: #dde7df;
  --theme-primary-wash: rgb(88 117 101 / 0.11);
  --theme-focus: #617d6d;
  --theme-focus-rgb: 97 125 109;
  --theme-gradient-left: #82998c;
  --theme-gradient-right: #637f70;
  --theme-camera: #1d3026;
  --theme-on-primary: #ffffff;
  --theme-on-gradient: #ffffff;
  --theme-shadow-rgb: 33 55 44;
}

html[data-brand-theme="rain-steel-blue"] {
  --theme-page: #f2f5f8;
  --theme-page-end: #f7f9fc;
  --theme-surface: #ffffff;
  --theme-surface-raised: #f8fafc;
  --theme-surface-soft: #e6ecf2;
  --theme-control-pressed: #dce5ee;
  --theme-ink: #1d2b3a;
  --theme-ink-soft: #405166;
  --theme-muted: #5d6c7d;
  --theme-faint: #6d7b8b;
  --theme-line: #d3dbe4;
  --theme-line-strong: #b8c5d2;
  --theme-primary: #5f7792;
  --theme-primary-strong: #455f7b;
  --theme-primary-soft: #dfe7f0;
  --theme-primary-wash: rgb(95 119 146 / 0.11);
  --theme-focus: #667f9a;
  --theme-focus-rgb: 102 127 154;
  --theme-gradient-left: #8195ab;
  --theme-gradient-right: #5f7792;
  --theme-camera: #172535;
  --theme-on-primary: #ffffff;
  --theme-on-gradient: #ffffff;
  --theme-shadow-rgb: 29 43 58;
}

html[data-brand-theme="dusk-violet-gray"] {
  --theme-page: #f5f3f7;
  --theme-page-end: #faf8fb;
  --theme-surface: #ffffff;
  --theme-surface-raised: #faf9fb;
  --theme-surface-soft: #ece8ef;
  --theme-control-pressed: #e2dce7;
  --theme-ink: #2d2933;
  --theme-ink-soft: #514b59;
  --theme-muted: #6b6471;
  --theme-faint: #7d7583;
  --theme-line: #ded9e2;
  --theme-line-strong: #c5bdcd;
  --theme-primary: #6c637a;
  --theme-primary-strong: #554c63;
  --theme-primary-soft: #e8e3ec;
  --theme-primary-wash: rgb(108 99 122 / 0.11);
  --theme-focus: #7c728b;
  --theme-focus-rgb: 124 114 139;
  --theme-gradient-left: #958da1;
  --theme-gradient-right: #746d82;
  --theme-camera: #241f2d;
  --theme-on-primary: #ffffff;
  --theme-on-gradient: #ffffff;
  --theme-shadow-rgb: 45 41 51;
}

html[data-brand-theme="gray-terracotta"] {
  --theme-page: #f7f3f0;
  --theme-page-end: #fbf8f6;
  --theme-surface: #ffffff;
  --theme-surface-raised: #fcf9f7;
  --theme-surface-soft: #f1e7e2;
  --theme-control-pressed: #eadbd4;
  --theme-ink: #3a2924;
  --theme-ink-soft: #5d4942;
  --theme-muted: #75625c;
  --theme-faint: #85736d;
  --theme-line: #e3d7d1;
  --theme-line-strong: #cfbbb2;
  --theme-primary: #875e53;
  --theme-primary-strong: #6f4c43;
  --theme-primary-soft: #f0e0d9;
  --theme-primary-wash: rgb(135 94 83 / 0.11);
  --theme-focus: #966c60;
  --theme-focus-rgb: 150 108 96;
  --theme-gradient-left: #b28475;
  --theme-gradient-right: #90685d;
  --theme-camera: #34231e;
  --theme-on-primary: #ffffff;
  --theme-on-gradient: #ffffff;
  --theme-shadow-rgb: 58 41 36;
}

html[data-brand-theme="porcelain-ink-teal"] {
  --theme-page: #f4f6f3;
  --theme-page-end: #f7f9f6;
  --theme-surface: #ffffff;
  --theme-surface-raised: #fafcfa;
  --theme-surface-soft: #eaf0ed;
  --theme-control-pressed: #dce5e1;
  --theme-ink: #10272c;
  --theme-ink-soft: #344d52;
  --theme-muted: #52676b;
  --theme-faint: #5f7074;
  --theme-line: #d6deda;
  --theme-line-strong: #b9c7c2;
  --theme-primary: #24545c;
  --theme-primary-strong: #1d464d;
  --theme-primary-soft: #dcebe7;
  --theme-primary-wash: rgb(36 84 92 / 0.10);
  --theme-focus: #3a7780;
  --theme-focus-rgb: 58 119 128;
  --theme-gradient-left: #31565b;
  --theme-gradient-right: #4d797d;
  --theme-camera: #102f35;
  --theme-on-primary: #ffffff;
  --theme-on-gradient: #ffffff;
  --theme-shadow-rgb: 16 39 44;
}

/* Map palette roles onto the existing layout and component token names. */
html[data-brand-theme] {
  --bg: var(--theme-page);
  --surface: var(--theme-surface);
  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --primary: var(--theme-primary);
  --primary-strong: var(--theme-primary-strong);
  --safe-bg: var(--theme-page);
  --shadow: 0 8px 24px rgb(var(--theme-shadow-rgb) / 0.08);
  --glass-fill: var(--theme-surface);
  --glass-fill-strong: var(--theme-surface-raised);
  --glass-stroke: var(--theme-line);
  --glass-stroke-cool: var(--theme-line);
  --glass-shadow: 0 8px 24px rgb(var(--theme-shadow-rgb) / 0.08);
  --glass-active-gradient: linear-gradient(90deg, var(--theme-gradient-left), var(--theme-gradient-right));
  --glass-active-shadow: rgb(var(--theme-focus-rgb) / 0.16);
  --page-bg: linear-gradient(180deg, var(--theme-page) 0%, var(--theme-page-end) 100%);
  --mobile-canvas: var(--theme-page);
  --mobile-surface: var(--theme-surface);
  --mobile-surface-solid: var(--theme-surface);
  --mobile-surface-raised: var(--theme-surface-raised);
  --mobile-surface-subtle: var(--theme-surface-soft);
  --mobile-control: var(--theme-surface-soft);
  --mobile-control-pressed: var(--theme-control-pressed);
  --mobile-ink: var(--theme-ink);
  --mobile-ink-soft: var(--theme-ink-soft);
  --mobile-muted: var(--theme-muted);
  --mobile-faint: var(--theme-faint);
  --mobile-line: var(--theme-line);
  --mobile-line-strong: var(--theme-line-strong);
  --mobile-primary: var(--theme-primary);
  --mobile-primary-strong: var(--theme-primary-strong);
  --mobile-primary-soft: var(--theme-primary-soft);
  --mobile-primary-wash: var(--theme-primary-wash);
  /* One near-white, palette-tinted material for the dashboard's primary
     feature cards.  Keeping this separate from raised/control surfaces makes
     the large modules read as one family without flattening button feedback. */
  --theme-feature-surface: color-mix(in srgb, var(--theme-primary) 2%, var(--theme-surface));
  --theme-feature-surface-hover: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-surface));
  --theme-feature-surface-active: color-mix(in srgb, var(--theme-primary) 9%, var(--theme-surface));
  --theme-interactive-hover: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-surface));
  --theme-interactive-active: color-mix(in srgb, var(--theme-primary) 13%, var(--theme-surface));
  --theme-overlay: color-mix(in srgb, var(--theme-camera) 58%, transparent);
  --theme-dialog-shadow: 0 28px 84px rgb(var(--theme-shadow-rgb) / 0.24);
  --theme-focus-ring: 0 0 0 3px rgb(var(--theme-focus-rgb) / 0.24);
  --theme-placeholder: color-mix(in srgb, var(--theme-muted) 74%, transparent);
  --theme-danger: #a63f50;
  --theme-danger-soft: #fff0f2;
  --theme-notification-reply: #6f62b6;
  --theme-notification-like: #b85d91;
  --theme-notification-moderation: #956b2e;
  --theme-like: #f5b82e;
  --theme-like-strong: #956000;
  --theme-like-soft: color-mix(in srgb, var(--theme-like) 12%, var(--theme-surface));
  --settings-status-neutral-border: var(--theme-line);
  --settings-status-neutral-background: var(--theme-surface-soft);
  --settings-status-neutral-text: var(--theme-muted);
  --settings-status-positive-border: var(--theme-line-strong);
  --settings-status-positive-background: var(--theme-primary-soft);
  --settings-status-positive-text: var(--theme-primary-strong);
  --settings-status-attention-border: color-mix(in srgb, #b47a18 38%, var(--theme-line));
  --settings-status-attention-background: color-mix(in srgb, #d99a2b 13%, var(--theme-surface));
  --settings-status-attention-text: #76551a;
  --settings-status-negative-border: color-mix(in srgb, var(--theme-danger) 40%, var(--theme-line));
  --settings-status-negative-background: var(--theme-danger-soft);
  --settings-status-negative-text: var(--theme-danger);
  --mobile-ui-danger: var(--theme-danger);
  --mobile-ui-danger-soft: var(--theme-danger-soft);
  --mobile-shadow-raised: 0 8px 24px rgb(var(--theme-shadow-rgb) / 0.08);
  --mobile-shadow-nav: 0 10px 30px rgb(var(--theme-shadow-rgb) / 0.09);
  --mobile-tracking-surface: var(--theme-surface);
  --mobile-tracking-surface-raised: var(--theme-surface-raised);
  --mobile-tracking-surface-soft: var(--theme-surface-soft);
  --mobile-tracking-ink: var(--theme-ink);
  --mobile-tracking-muted: var(--theme-muted);
  --mobile-tracking-line: rgb(var(--theme-shadow-rgb) / 0.16);
  --mobile-tracking-primary: var(--theme-primary);
  --mobile-tracking-primary-strong: var(--theme-primary-strong);
  --mobile-tracking-primary-soft: var(--theme-primary-soft);
  --mobile-tracking-shadow-raised: 0 8px 24px rgb(var(--theme-shadow-rgb) / 0.08);
  --mobile-ui-surface: var(--theme-surface);
  --mobile-ui-surface-soft: var(--theme-surface-soft);
  --mobile-ui-surface-raised: var(--theme-surface-raised);
  --mobile-ui-border: rgb(var(--theme-shadow-rgb) / 0.16);
  --mobile-ui-border-strong: var(--theme-line-strong);
  --mobile-ui-text: var(--theme-ink);
  --mobile-ui-muted: var(--theme-muted);
  --mobile-ui-faint: var(--theme-faint);
  --mobile-ui-accent: var(--theme-primary);
  --mobile-ui-accent-soft: var(--theme-primary-soft);
  --text: var(--theme-ink);
  --accent: var(--theme-primary);
  --panel: var(--theme-surface);
  --border: var(--theme-line);
  --surface-soft: var(--theme-surface-soft);
}

@media (prefers-color-scheme: dark) {
  html[data-brand-theme="quiet-aurora-teal"] {
    --theme-page: #0c181f;
    --theme-page-end: #102129;
    --theme-surface: #122229;
    --theme-surface-raised: #183039;
    --theme-surface-soft: #1d3d47;
    --theme-control-pressed: #284d58;
    --theme-ink: #f2f7f8;
    --theme-ink-soft: #d5e2e5;
    --theme-muted: #b4c5ca;
    --theme-faint: #8fa4aa;
    --theme-line: #324a53;
    --theme-line-strong: #496875;
    --theme-primary: #77bcc7;
    --theme-primary-strong: #9dd4dc;
    --theme-primary-soft: #1d3d47;
    --theme-primary-wash: rgb(119 188 199 / 0.13);
    --theme-focus: #9dd4dc;
    --theme-focus-rgb: 157 212 220;
    --theme-camera: #081317;
    --theme-on-primary: #0c181f;
    --theme-shadow-rgb: 0 0 0;
  }

  html[data-brand-theme="sage-mineral"] {
    --theme-page: #111915;
    --theme-page-end: #151f1a;
    --theme-surface: #18231d;
    --theme-surface-raised: #202f27;
    --theme-surface-soft: #2d4639;
    --theme-control-pressed: #385344;
    --theme-ink: #f3f6f2;
    --theme-ink-soft: #d9e2dc;
    --theme-muted: #bac5bd;
    --theme-faint: #929f96;
    --theme-line: #394b40;
    --theme-line-strong: #53695a;
    --theme-primary: #a3bdaf;
    --theme-primary-strong: #c1d2c8;
    --theme-primary-soft: #2d4639;
    --theme-primary-wash: rgb(163 189 175 / 0.13);
    --theme-focus: #c1d2c8;
    --theme-focus-rgb: 193 210 200;
    --theme-camera: #0b120e;
    --theme-on-primary: #111915;
    --theme-shadow-rgb: 0 0 0;
  }

  html[data-brand-theme="rain-steel-blue"] {
    --theme-page: #101820;
    --theme-page-end: #141f29;
    --theme-surface: #17222c;
    --theme-surface-raised: #202e3b;
    --theme-surface-soft: #293f53;
    --theme-control-pressed: #344e64;
    --theme-ink: #f4f7fa;
    --theme-ink-soft: #d8e0e8;
    --theme-muted: #b8c3ce;
    --theme-faint: #909fac;
    --theme-line: #374a5d;
    --theme-line-strong: #506a82;
    --theme-primary: #a6bed4;
    --theme-primary-strong: #c2d3e2;
    --theme-primary-soft: #293f53;
    --theme-primary-wash: rgb(166 190 212 / 0.13);
    --theme-focus: #c2d3e2;
    --theme-focus-rgb: 194 211 226;
    --theme-camera: #0a1118;
    --theme-on-primary: #101820;
    --theme-shadow-rgb: 0 0 0;
  }

  html[data-brand-theme="dusk-violet-gray"] {
    --theme-page: #17151a;
    --theme-page-end: #1d1921;
    --theme-surface: #201d24;
    --theme-surface-raised: #2a2630;
    --theme-surface-soft: #40384a;
    --theme-control-pressed: #4b4256;
    --theme-ink: #f7f4f9;
    --theme-ink-soft: #e1dce5;
    --theme-muted: #c5bec9;
    --theme-faint: #9e96a3;
    --theme-line: #4a4351;
    --theme-line-strong: #665c70;
    --theme-primary: #bdb5ca;
    --theme-primary-strong: #d4cedc;
    --theme-primary-soft: #40384a;
    --theme-primary-wash: rgb(189 181 202 / 0.13);
    --theme-focus: #d4cedc;
    --theme-focus-rgb: 212 206 220;
    --theme-camera: #100e13;
    --theme-on-primary: #17151a;
    --theme-shadow-rgb: 0 0 0;
  }

  html[data-brand-theme="gray-terracotta"] {
    --theme-page: #1a1513;
    --theme-page-end: #211916;
    --theme-surface: #241d1a;
    --theme-surface-raised: #302520;
    --theme-surface-soft: #493329;
    --theme-control-pressed: #594036;
    --theme-ink: #faf5f2;
    --theme-ink-soft: #e5d9d4;
    --theme-muted: #cdbeb7;
    --theme-faint: #a2928b;
    --theme-line: #55423a;
    --theme-line-strong: #73584f;
    --theme-primary: #d1a092;
    --theme-primary-strong: #e2baae;
    --theme-primary-soft: #493329;
    --theme-primary-wash: rgb(209 160 146 / 0.13);
    --theme-focus: #e2baae;
    --theme-focus-rgb: 226 186 174;
    --theme-camera: #120d0b;
    --theme-on-primary: #1a1513;
    --theme-shadow-rgb: 0 0 0;
  }

  html[data-brand-theme="porcelain-ink-teal"] {
    --theme-page: #0e1719;
    --theme-page-end: #111d20;
    --theme-surface: #152124;
    --theme-surface-raised: #1b2a2e;
    --theme-surface-soft: #203035;
    --theme-control-pressed: #294047;
    --theme-ink: #f2f6f4;
    --theme-ink-soft: #d6e0dd;
    --theme-muted: #b7c4c1;
    --theme-faint: #899a97;
    --theme-line: #314448;
    --theme-line-strong: #466066;
    --theme-primary: #7db7b9;
    --theme-primary-strong: #a5cfca;
    --theme-primary-soft: #203d41;
    --theme-primary-wash: rgb(125 183 185 / 0.12);
    --theme-focus: #9dd7d1;
    --theme-focus-rgb: 157 215 209;
    --theme-camera: #08151e;
    --theme-on-primary: #0e1719;
    --theme-shadow-rgb: 0 0 0;
  }

  /* Dark mode keeps the established dark material system.  The near-white
     feature surface is a light-mode treatment only. */
  html[data-brand-theme] {
    --theme-feature-surface: var(--theme-surface);
    --theme-feature-surface-hover: var(--theme-surface-raised);
    --theme-feature-surface-active: var(--theme-control-pressed);
    --theme-interactive-hover: var(--theme-surface-raised);
    --theme-interactive-active: var(--theme-control-pressed);
    --theme-overlay: color-mix(in srgb, var(--theme-camera) 74%, transparent);
    --theme-dialog-shadow: 0 30px 90px rgb(var(--theme-shadow-rgb) / 0.52);
    --theme-danger: #ff9bad;
    --theme-danger-soft: #3b222b;
    --theme-notification-reply: #b6a9f0;
    --theme-notification-like: #efa7cf;
    --theme-notification-moderation: #e2bd7f;
    --theme-like: #f2c769;
    --theme-like-strong: #f2c769;
    --theme-like-soft: color-mix(in srgb, var(--theme-like) 14%, var(--theme-surface));
    --settings-status-attention-border: color-mix(in srgb, #d5a84d 45%, var(--theme-line));
    --settings-status-attention-background: color-mix(in srgb, #d5a84d 14%, var(--theme-surface));
    --settings-status-attention-text: #f0cd87;
    --mobile-ui-danger: var(--theme-danger);
    --mobile-ui-danger-soft: var(--theme-danger-soft);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme],
html[data-theme="glass-porcelain-ink"][data-brand-theme] body {
  background-color: var(--theme-page);
  background-image: linear-gradient(180deg, var(--theme-page), var(--theme-page-end));
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .history-section,
  .community-share-panel,
  .community-content-tabs,
  .community-card,
  .ranking-periods,
  .ranking-item,
  .account-management-entry,
  .account-profile-card,
  .account-binding-card,
  .passkey-card,
  .native-health-card,
  .native-health-switch,
  .native-health-json,
  .chart-card,
  .calendar-card,
  .timeline-card,
  .record-card,
  .food-history-card,
  .capture-panel,
  .food-record-panel,
  .weight-calendar,
  .weight-goal-chart,
  .notification-panel
) {
  border-color: var(--theme-line);
  background: var(--theme-surface);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-panel,
  .community-comments-panel,
  .ai-summary-panel,
  .policy-panel,
  .privacy-consent-dialog,
  .passkey-prompt-dialog,
  .profile-edit-dialog,
  .confirmation-dialog,
  .action-confirm-dialog,
  .feedback-dialog,
  .food-selection-dialog,
  .manual-food-dialog,
  .quick-weight-dialog,
  .replay-modal-panel,
  .image-preview-panel
) {
  border-color: var(--theme-line);
  background: var(--theme-surface);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(input, textarea, select) {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(input, textarea, select):focus {
  border-color: var(--theme-focus);
  background: var(--theme-surface);
  box-shadow: 0 0 0 3px rgb(var(--theme-focus-rgb) / 0.16);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .profile-avatar,
  .settings-account-avatar,
  .community-member-avatar,
  .ranking-avatar,
  .community-detail-avatar,
  .community-comment-avatar
) {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tabs {
  border-color: var(--theme-line);
  background: color-mix(in srgb, var(--theme-surface) 96%, transparent);
  box-shadow: 0 10px 30px rgb(var(--theme-shadow-rgb) / 0.09);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tabs::before {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--theme-page) 84%, transparent));
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active::after,
html[data-theme="glass-porcelain-ink"][data-brand-theme] body :is(
  .dashboard,
  .community-view,
  .settings-view
) > .topbar > .topbar-actions :is(.topbar-icon-button, .notification-bell) {
  color: var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active::after {
  background: var(--theme-primary);
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:hover:not(:disabled),
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:focus-visible {
    color: var(--theme-muted);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active:hover:not(:disabled),
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active:focus-visible {
    background: var(--theme-primary-wash);
    color: var(--theme-primary-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:active:not(:disabled) {
    background: color-mix(in srgb, var(--theme-primary) 12%, transparent);
    color: var(--theme-primary-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active:active:not(:disabled) {
    background: color-mix(in srgb, var(--theme-primary) 18%, transparent);
    color: var(--theme-primary-strong);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .record-entry-button,
  .replay-launch-button,
  .settings-option-button,
  .account-profile-item,
  .account-management-entry
) {
  border-color: var(--theme-line);
  background: var(--theme-surface);
  color: var(--theme-ink);
}

/* The profile destination is a settings card too.  Keep it on the same
   palette-aware raised surface as the other overview destinations instead of
   letting the generic account-card rule fall back to pure white. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] #settingsOverviewPanel .account-management-entry,
html[data-theme="glass-porcelain-ink"][data-brand-theme] #settingsOverviewPanel .account-management-entry:is(:hover, :focus-visible) {
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] #settingsOverviewPanel .account-management-entry:active:not(:disabled) {
  background: var(--theme-control-pressed);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .secondary-button,
  .ghost-button,
  .profile-action-button,
  .history-toggle-button,
  .settings-back-button,
  .settings-logout-button,
  .food-selection-manual-button,
  .modal-icon-button,
  .notification-mark-read,
  .notification-close,
  .community-detail-close,
  .community-comments-close,
  .ai-summary-close,
  .image-preview-close,
  .document-link
) {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-content-tab.is-active,
  .ranking-period.is-active,
  .capture-mode-tab.is-active
) {
  border-color: var(--theme-line-strong);
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .today-record-button,
  .record-submit-button,
  #captureButton,
  #saveQuickWeightButton,
  #acceptFullModeButton,
  #startPasskeyPromptButton,
  #acceptCommunityShareButton,
  #submitFeedbackButton,
  #applyFoodSelectionButton,
  #submitManualFoodButton
) {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-on-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .today-record-button,
  .record-submit-button,
  #captureButton,
  #saveQuickWeightButton,
  #acceptFullModeButton,
  #startPasskeyPromptButton,
  #acceptCommunityShareButton,
  #submitFeedbackButton,
  #applyFoodSelectionButton,
  #submitManualFoodButton
):is(:hover:not(:disabled), :focus-visible) {
  border-color: var(--theme-primary-strong);
  background: var(--theme-primary-strong);
  color: var(--theme-on-primary);
  box-shadow: 0 0 0 3px rgb(var(--theme-focus-rgb) / 0.16);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview {
  background: linear-gradient(128deg, var(--theme-gradient-left), var(--theme-gradient-right));
  color: var(--theme-on-gradient);
  box-shadow: 0 8px 24px rgb(var(--theme-shadow-rgb) / 0.12);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview :is(
  .today-overview-kicker,
  .today-record-status,
  .today-primary-metric span,
  .today-primary-metric strong,
  .today-primary-metric small,
  .today-secondary-metric span,
  .today-secondary-metric strong,
  .today-secondary-metric small,
  .today-insight
) {
  color: var(--theme-on-gradient);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview #todayRecordStatus,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview :is(.today-primary-metric, .today-secondary-metric) {
  border-color: color-mix(in srgb, var(--theme-line) 76%, transparent);
  background: color-mix(in srgb, var(--theme-surface-raised) 92%, transparent);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview #todayRecordStatus {
  color: var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview :is(
  .today-primary-metric span,
  .today-primary-metric small,
  .today-secondary-metric span,
  .today-secondary-metric small
) {
  color: var(--theme-muted);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview :is(
  .today-primary-metric strong,
  .today-secondary-metric strong
) {
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview #todayInsightText {
  border-left-color: var(--theme-gradient-right);
  background: color-mix(in srgb, var(--theme-surface-raised) 92%, transparent);
  color: var(--theme-muted);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-record-button {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-on-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(.camera-stage, .camera-preview-shell) {
  background: var(--theme-camera);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(.camera-guide, .camera-head-guide),
html[data-theme="glass-porcelain-ink"][data-brand-theme] .camera-head-guide {
  border-color: color-mix(in srgb, var(--theme-on-gradient) 76%, transparent);
  color: color-mix(in srgb, var(--theme-on-gradient) 70%, var(--theme-primary));
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .empty-camera {
  background:
    radial-gradient(circle at 50% 36%, var(--theme-primary-wash), transparent 36%),
    var(--theme-camera);
  color: color-mix(in srgb, var(--theme-on-gradient) 72%, var(--theme-primary));
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .empty-camera span {
  border-color: color-mix(in srgb, var(--theme-on-gradient) 18%, transparent);
  background: color-mix(in srgb, var(--theme-on-gradient) 7%, transparent);
  color: color-mix(in srgb, var(--theme-on-gradient) 78%, var(--theme-primary));
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .camera-stage:active:not(.is-active) {
  border-color: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-line));
  box-shadow: 0 7px 18px rgb(var(--theme-shadow-rgb) / 0.12);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-brand-icon {
  box-shadow: 0 18px 38px rgb(var(--theme-shadow-rgb) / 0.15);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-copy h1 {
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(.login-subtitle, #loginMessage) {
  color: var(--theme-muted);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-options .apple-login-entry,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-options .apple-login-entry:is(:visited, :focus, :focus-visible, :hover:not(:disabled)) {
  border-color: var(--theme-primary) !important;
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-options :is(
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
),
html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-options :is(
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
):is(:hover, :focus, :focus-visible, :active) {
  border-color: var(--theme-primary) !important;
  background: transparent !important;
  color: var(--theme-primary) !important;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-options :is(
  .apple-login-entry,
  .passkey-login-entry,
  .huawei-login-entry,
  .qq-login-entry,
  .test-login-entry
):focus-visible,
html[data-theme="glass-porcelain-ink"][data-brand-theme] body :is(
  .dashboard,
  .community-view,
  .settings-view
) > .topbar > .topbar-actions :is(.topbar-icon-button, .notification-bell):focus-visible,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .share-switch input:focus-visible + .share-switch-track {
  outline-color: rgb(var(--theme-focus-rgb) / 0.62);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .site-footer {
  border-top-color: var(--theme-line);
  color: var(--theme-faint);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .pull-refresh {
  border-color: var(--theme-line);
  background: var(--theme-surface);
  color: var(--theme-primary);
  box-shadow: 0 8px 24px rgb(var(--theme-shadow-rgb) / 0.08);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .share-switch-track {
  background: var(--theme-line);
  box-shadow: inset 0 0 0 1px var(--theme-line-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .share-switch-track span {
  background: var(--theme-surface);
  box-shadow: 0 2px 7px rgb(var(--theme-shadow-rgb) / 0.18);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .share-switch input:checked + .share-switch-track {
  background: var(--theme-primary);
  box-shadow: inset 0 0 0 1px var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .share-switch input:checked + .share-switch-track + .share-switch-text {
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .share-switch-text {
  color: var(--theme-muted);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-section .ai-advice-button,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-section .ai-advice-button:is(:hover, :focus-visible, :active) {
  border-color: color-mix(in srgb, var(--theme-primary) 18%, transparent);
  background: linear-gradient(135deg, var(--theme-primary-soft), var(--theme-surface-raised));
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-section .ai-advice-button small {
  color: var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-section .ai-advice-button strong {
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-section .ai-advice-button em {
  color: var(--theme-muted);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-section .ai-advice-action {
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
}

/* The AI summary sheet used to inherit the legacy pink/cyan glass header and
   a fixed violet label.  Keep its existing geometry, but make the complete
   top chrome follow the selected palette in both light and dark mode. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-header,
html[data-theme="glass-porcelain-ink"][data-brand-theme] body .ai-summary-header {
  border-bottom-color: var(--theme-line);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-primary-soft) 72%, var(--theme-surface)) 0%,
      var(--theme-surface) 72%
    );
  color: var(--theme-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-header p {
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-header h2 {
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-panel::before {
  background: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-line));
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-close,
html[data-theme="glass-porcelain-ink"][data-brand-theme] body .ai-summary-close {
  border-color: var(--theme-line);
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-close:is(:hover, :focus-visible, :active),
html[data-theme="glass-porcelain-ink"][data-brand-theme] body .ai-summary-close:is(:hover, :focus-visible, :active) {
  border-color: var(--theme-line-strong);
  background: var(--theme-control-pressed);
  color: var(--theme-ink);
}

/* Theme chooser: a new Settings surface, without changing the app shell. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-grid {
  min-width: 0;
  margin: 18px 0 0;
  border: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option {
  position: relative;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  padding: 12px;
  background: var(--theme-surface-raised);
  color: var(--theme-ink);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option:active {
  transform: scale(0.99);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option:is(.is-selected, :has(input:checked)) {
  border-color: var(--theme-primary);
  background: var(--theme-primary-soft);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option img {
  width: 58px;
  height: 58px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--theme-line) 80%, transparent);
  border-radius: 15px;
  background: var(--theme-surface-soft);
  object-fit: cover;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option input:focus-visible + img {
  outline: 3px solid rgb(var(--theme-focus-rgb) / 0.62);
  outline-offset: 3px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option > span:not(.visual-theme-check) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option strong {
  overflow: hidden;
  color: var(--theme-ink);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option small {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-check {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--theme-line-strong);
  border-radius: 50%;
  background: var(--theme-surface);
  color: transparent;
  font-size: 13px;
  font-weight: 800;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-option:is(.is-selected, :has(input:checked)) .visual-theme-check {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-on-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-note {
  margin-top: 16px;
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview {
    border-color: var(--theme-line);
    padding-inline: 18px;
    background: var(--theme-surface);
    color: var(--theme-ink);
    box-shadow: 0 8px 24px rgb(var(--theme-shadow-rgb) / 0.06);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview::before {
    content: none;
    display: none;
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview :is(
    .today-primary-metric,
    .today-secondary-metric
  ) {
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-primary-metric > span,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-primary-metric > small,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-secondary-metric > span,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-secondary-metric > small {
    color: var(--theme-muted);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-primary-metric strong,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-secondary-metric > strong {
    color: var(--theme-ink);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-secondary-metric {
    border-top-color: var(--theme-line);
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-secondary-metric > small {
    border-left-color: var(--theme-line);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-record-button,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mobile-today-overview .today-record-button:is(:hover, :focus-visible, :active) {
    border-color: var(--theme-primary);
    background: var(--theme-primary);
    color: var(--theme-on-primary);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(.record-entry-button, .replay-launch-button),
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(.record-entry-button, .replay-launch-button):is(:hover, :focus-visible, :active) {
    border-color: var(--theme-line);
    background: var(--theme-surface-raised);
    color: var(--theme-ink);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(.record-entry-icon, .replay-entry-icon) {
    background: transparent;
    color: var(--theme-primary);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(.record-entry-button, .replay-launch-button) :is(.action-label, span:last-child) {
    color: var(--theme-ink);
  }
}

@media (max-width: 540px) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .visual-theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  html[data-theme="glass-porcelain-ink"] .weight-chart.is-native-large-card .weight-trend-widget-card {
    grid-template-rows: auto 34px minmax(120px, 1fr) auto auto;
    gap: 7px;
    padding: 14px;
  }

  html[data-theme="glass-porcelain-ink"] .weight-chart.is-native-large-card .weight-trend-widget-chart {
    min-height: 120px;
  }

  html[data-theme="glass-porcelain-ink"] .weight-trend-widget-head strong {
    font-size: 24px;
  }

  html[data-theme="glass-porcelain-ink"] .weight-trend-widget-metrics {
    gap: 5px;
  }

  html[data-theme="glass-porcelain-ink"] .weight-trend-widget-foot {
    gap: 5px;
  }

  html[data-theme="glass-porcelain-ink"] .weight-trend-widget-metrics strong {
    font-size: 11px;
  }

  html[data-theme="glass-porcelain-ink"] .weight-trend-widget-metrics span {
    font-size: 9px;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .login-brand-icon {
    box-shadow: 0 20px 46px rgb(0 0 0 / 0.42);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .share-switch input:checked + .share-switch-track span {
    background: var(--theme-on-primary);
  }
}

/* Standalone legal and replay surfaces share the selected device theme. */
html[data-porcelain-page][data-brand-theme] {
  background: var(--theme-page);
}

html[data-porcelain-page][data-brand-theme] body {
  color: var(--theme-ink);
  background: linear-gradient(180deg, var(--theme-page), var(--theme-page-end));
}

html[data-porcelain-page="legal"][data-brand-theme] article,
html[data-porcelain-page="replay"][data-brand-theme] :is(.replay-loading-card, .photo-frame, .replay-data) {
  border-color: var(--theme-line);
  background: var(--theme-surface);
  color: var(--theme-ink);
}

html[data-porcelain-page="replay"][data-brand-theme] button {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-ink);
}

html[data-porcelain-page="replay"][data-brand-theme] button:is(:hover:not(:disabled), :focus-visible) {
  border-color: var(--theme-line-strong);
  background: var(--theme-control-pressed);
  box-shadow: 0 0 0 3px rgb(var(--theme-focus-rgb) / 0.14);
}

html[data-porcelain-page="replay"][data-brand-theme] :is(#playbackButton, #returnButton) {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-on-primary);
}

html[data-porcelain-page="replay"][data-brand-theme] .weight-change {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-porcelain-page="replay"][data-brand-theme] .replay-loading-spinner {
  border-color: color-mix(in srgb, var(--theme-primary) 14%, transparent);
  border-top-color: var(--theme-primary);
}

html[data-porcelain-page="replay"][data-brand-theme] .replay-loading-progress {
  background: color-mix(in srgb, var(--theme-primary) 13%, transparent);
}

html[data-porcelain-page="replay"][data-brand-theme] .replay-loading-progress > span {
  background: linear-gradient(90deg, var(--theme-gradient-left), var(--theme-gradient-right));
}

/*
 * Fixed semantic data palette. Brand themes may change chrome and surfaces,
 * but weight direction and prediction must keep the same meaning everywhere.
 */
html[data-theme="glass-porcelain-ink"] {
  --data-loss: #3BB6CE;
  --data-gain: #FD8E26;
  --data-prediction: #9545F7;
  --data-calendar-surface: #F4F6F3;
  --data-calendar-empty: #EEF2EF;
  --chart-loss: var(--data-loss);
  --chart-gain: var(--data-gain);
  --chart-plan: var(--data-loss);
  --chart-selected: var(--data-loss);
  --chart-selected-soft: color-mix(in srgb, var(--data-loss) 13%, transparent);
  --chart-prediction: var(--data-prediction);
  --chart-prediction-soft: color-mix(in srgb, var(--data-prediction) 13%, transparent);
  --chart-prediction-glow: transparent;
  --calendar-loss: var(--data-loss);
  --calendar-gain: var(--data-gain);
  --calendar-neutral: var(--data-calendar-empty);
  --calendar-selected: var(--data-loss);
  --calendar-selected-bg: color-mix(in srgb, var(--data-loss) 16%, var(--data-calendar-surface));
  --weight-chart-reference-line-mix: 28%;
  --weight-chart-reference-label-mix: 12%;
}

/* Calendar cells are deliberately flat: hue carries the data, not elevation. */
html[data-theme="glass-porcelain-ink"] :is(.calendar-day, button.calendar-day) {
  border-color: color-mix(in srgb, var(--calendar-direction, var(--line)) 24%, transparent);
  background: transparent !important;
  color: var(--ink);
  box-shadow: none !important;
  text-shadow: none;
  transform: none;
}

html[data-theme="glass-porcelain-ink"] .calendar-day.is-up {
  --calendar-direction: var(--calendar-gain);
}

html[data-theme="glass-porcelain-ink"] .calendar-day.is-down {
  --calendar-direction: var(--calendar-loss);
}

html[data-theme="glass-porcelain-ink"] .calendar-day:is(.is-up, .is-down) {
  color: var(--calendar-direction) !important;
}

html[data-theme="glass-porcelain-ink"] button.calendar-day:is(:hover, :focus-visible, :active):not(:disabled) {
  border-color: color-mix(in srgb, var(--calendar-direction, var(--calendar-selected)) 58%, transparent);
  background: transparent !important;
  color: var(--calendar-direction, var(--ink));
  box-shadow: none !important;
  outline: none;
  transform: none;
}

html[data-theme="glass-porcelain-ink"] :is(.calendar-day, button.calendar-day).is-selected,
html[data-theme="glass-porcelain-ink"] button.calendar-day.is-selected:is(:hover, :focus-visible, :active):not(:disabled) {
  border-color: var(--calendar-direction, var(--calendar-selected));
  background: transparent !important;
  color: var(--calendar-direction, var(--calendar-selected)) !important;
  box-shadow: none !important;
  outline: 2px solid color-mix(in srgb, var(--calendar-direction, var(--calendar-selected)) 22%, transparent);
  outline-offset: 1px;
}

html[data-theme="glass-porcelain-ink"] :is(.calendar-day, button.calendar-day).is-empty {
  border-color: transparent;
  background: transparent !important;
  color: var(--muted);
  box-shadow: none !important;
  outline: none;
}

/* Keep the directional day cells, but remove the faint panel behind the
   selected-day summary and the whole date grid. */
html[data-theme="glass-porcelain-ink"] :is(.calendar-detail, .calendar-grid) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme="glass-porcelain-ink"] .goal-chart-metric.is-loss::before {
  border-top-color: var(--chart-loss);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-metric.is-gain::before {
  border-top-color: var(--chart-gain);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-metric.is-prediction::before {
  border-top-color: var(--chart-prediction);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-line.is-loss {
  stroke: var(--chart-loss);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-line.is-gain {
  stroke: var(--chart-gain);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-line.is-forecast {
  stroke: var(--chart-prediction);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-current-ring {
  fill: var(--chart-selected-soft);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-current-ring.is-gain {
  fill: color-mix(in srgb, var(--chart-gain) 13%, transparent);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-point.is-loss circle {
  fill: var(--chart-loss);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-point.is-gain circle {
  fill: var(--chart-gain);
}

html[data-theme="glass-porcelain-ink"] .goal-chart-point.is-predicted circle {
  fill: var(--chart-prediction);
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  html[data-theme="glass-porcelain-ink"] .weight-chart.is-native-large-card {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  html[data-theme="glass-porcelain-ink"] .weight-chart.is-native-large-card .weight-trend-widget-card {
    min-height: 0;
    padding: 16px;
  }

  html[data-theme="glass-porcelain-ink"] .weight-chart.is-native-large-card .weight-trend-widget-chart svg {
    width: 100% !important;
    height: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="glass-porcelain-ink"] {
    --data-loss: #96ECFD;
    --data-gain: #FFC085;
    --data-prediction: #CA9EFF;
    --data-calendar-surface: #152124;
    --data-calendar-empty: #203035;
    --weight-chart-reference-line-mix: 38%;
    --weight-chart-reference-label-mix: 18%;
  }
}

/* Record thumbnails use one flat, low-contrast theme wash in every palette.
   The workout tile no longer has a separate red/cyan material treatment. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-health-thumb,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-health-thumb.is-workout {
  border-color: var(--theme-line);
  background: var(--theme-primary-wash);
  color: var(--theme-primary);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-health-thumb.is-workout {
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  padding: 6px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-health-thumb.is-sleep {
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  padding: 6px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .history-health-thumb.is-workout .history-health-thumb-label {
  display: none;
}

/* The selected date gains one typographic step in addition to its outline. */
html[data-theme="glass-porcelain-ink"] :is(.calendar-day, button.calendar-day).is-selected {
  --calendar-day-font-size: 11px;
  font-weight: 800;
}

/* Personal details read as one grouped list: a single themed surface with
   equal transparent rows and separators, rather than five adjacent cards. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .account-profile-readonly {
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .account-profile-item,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .account-profile-item:is(:hover, :focus-visible, :active):not(:disabled) {
  border-color: var(--theme-line);
  border-radius: 0;
  background: transparent;
  color: var(--theme-ink);
  box-shadow: none;
  transform: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .account-profile-item:focus-visible {
  outline: 2px solid rgb(var(--theme-focus-rgb) / 0.42);
  outline-offset: -2px;
}

/* The dashboard avatar is now a real navigation button. Neutralize the global
   button skin while retaining the existing avatar image and an accessible
   keyboard focus ring. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] body button.profile-avatar-entry,
html[data-theme="glass-porcelain-ink"][data-brand-theme] body button.profile-avatar-entry:is(:hover, :focus-visible, :active):not(:disabled) {
  min-height: 0;
  border-color: var(--theme-line);
  padding: 0;
  background-color: var(--theme-surface-soft);
  color: var(--theme-primary-strong);
  box-shadow: 0 7px 18px rgb(var(--theme-shadow-rgb) / 0.10);
  transform: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] body button.profile-avatar-entry:focus-visible {
  outline: 2px solid rgb(var(--theme-focus-rgb) / 0.56);
  outline-offset: 3px;
}

/* Dashboard feature surfaces share one very lightly tinted material.  The
   generic selectors intentionally include their community-detail counterparts
   so the same chart/calendar module does not change material between views. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .mobile-today-overview,
  .weight-chart,
  .weight-calendar,
  .weight-goal-chart,
  .history-section
) {
  border-color: var(--theme-line);
  background: var(--theme-feature-surface);
  background-image: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .weight-trend-widget-card {
  background: transparent;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(
  .record-entry-button,
  .replay-launch-button
) {
  border-color: var(--theme-line);
  background: var(--theme-feature-surface);
  background-image: none;
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(
  .record-entry-button,
  .replay-launch-button
):is(:hover:not(:disabled), :focus-visible) {
  border-color: var(--theme-line-strong);
  background: var(--theme-feature-surface-hover);
  background-image: none;
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(
  .record-entry-button,
  .replay-launch-button
):active:not(:disabled) {
  background: var(--theme-feature-surface-active);
  background-image: none;
  color: var(--theme-ink);
}

/* Community detail actions share one optical grid.  The like and comment
   pills use identical geometry while the icon-only more action stays compact. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions :is(
  .community-comment-button,
  .community-like-button.community-social-button
) {
  width: clamp(56px, 16.4vw, 62px);
  min-width: clamp(56px, 16.4vw, 62px);
  height: 42px;
  min-height: 42px;
  flex: 0 0 clamp(56px, 16.4vw, 62px);
  gap: 6px;
  border-radius: 999px;
  padding: 0 7px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-more-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  padding: 0;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions :is(
  .community-comment-button .community-action-icon,
  .community-like-button .community-like-icon
) {
  width: 18px;
  height: 18px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions :is(
  .community-action-count,
  .community-like-count
) {
  min-width: 16px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

/* Action sheets use semantic surfaces in both appearances.  Destructive
   actions keep a restrained red tint plus a visible edge in light mode. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button:is(:hover, :focus-visible) {
  border: 1px solid var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-primary-strong);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button.is-danger,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button.is-danger:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--mobile-ui-danger) 46%, var(--theme-line));
  background: var(--mobile-ui-danger-soft);
  color: var(--mobile-ui-danger);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button:active:not(:disabled) {
  background: var(--theme-control-pressed);
  transform: translateY(1px);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button.is-danger:active:not(:disabled) {
  background: color-mix(in srgb, var(--mobile-ui-danger) 16%, var(--theme-surface));
}

/* The fixed high/low selection row belongs to the selected brand theme.  Data
   semantics remain cyan/orange/purple, but the surrounding ribbon no longer
   falls back to the legacy blue glass material. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .weight-chart .weight-trend-widget-selection-slot .chart-detail,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .weight-chart .weight-trend-widget-selection-slot .chart-detail.is-visible {
  border: 1px solid var(--theme-line-strong);
  background: var(--theme-primary-soft);
  color: var(--theme-muted);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .weight-chart .weight-trend-widget-selection-slot .chart-detail-date {
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .weight-chart .weight-trend-widget-selection-slot .chart-detail strong {
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .weight-chart .weight-trend-widget-selection-slot .chart-detail.is-prediction {
  border-color: color-mix(in srgb, var(--chart-prediction) 38%, var(--theme-line-strong));
  background: var(--theme-primary-soft);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .weight-chart .weight-trend-widget-selection-slot .chart-detail.is-prediction strong {
  color: var(--chart-prediction);
}

/* Restore a truly circular dashboard avatar after the global mobile button
   skin, which otherwise turns it into a rounded rectangle. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] body button.profile-avatar-entry,
html[data-theme="glass-porcelain-ink"][data-brand-theme] body button.profile-avatar-entry:is(:hover, :focus-visible, :active):not(:disabled) {
  border-radius: 50%;
  overflow: hidden;
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  /* Keep the safe-area padding, but paint it with the replay page material so
     there is no white strip above or below the embedded replay document. */
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .replay-modal-panel,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .replay-modal-panel iframe {
    background: var(--theme-page);
  }
}

@media (hover: none), (pointer: coarse) {
  /* WKWebView keeps :hover after a tap.  On touch hardware hover/focus are the
     released state; only :active is allowed to render pressed feedback. */
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-social-button,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-social-button:is(:hover, :focus, :focus-visible) {
    border-color: var(--theme-line);
    background: var(--theme-surface-raised);
    color: var(--theme-ink);
    box-shadow: none;
    outline: none;
    transform: none;
    -webkit-tap-highlight-color: transparent;
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked:is(:hover, :focus, :focus-visible) {
    border-color: color-mix(in srgb, var(--theme-like) 42%, var(--theme-line));
    background: var(--theme-like-soft);
    color: var(--theme-like-strong);
    box-shadow: none;
    outline: none;
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-social-button:active:not(:disabled) {
    border-color: var(--theme-line-strong);
    background: var(--theme-control-pressed);
    box-shadow: none;
    transform: scale(0.96);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked:active:not(:disabled) {
    border-color: color-mix(in srgb, var(--theme-like) 58%, var(--theme-line));
    background: color-mix(in srgb, var(--theme-like) 17%, var(--theme-surface-raised));
    color: var(--theme-like-strong);
  }
}

@media (prefers-color-scheme: dark) and (hover: none),
  (prefers-color-scheme: dark) and (pointer: coarse) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked,
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked:is(:hover, :focus, :focus-visible) {
    color: var(--theme-like-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked:active:not(:disabled) {
    color: var(--theme-like-strong);
  }
}

/*
 * Complete component coverage
 *
 * The palette layer is intentionally last. Components may keep their layout
 * and semantic data colors, but all chrome, reading surfaces and interaction
 * feedback must resolve through the selected brand theme.
 */
html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .login-copy h1,
  .topbar h1,
  .settings-group h2,
  .community-ranking h2
) {
  color: var(--theme-ink);
  text-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .eyebrow,
  .settings-kicker,
  .community-ranking-kicker
) {
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(input, textarea)::placeholder {
  color: var(--theme-placeholder);
  opacity: 1;
}

/* Navigation uses the same complete state model on phone, tablet and desktop. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tabs {
  border-color: var(--theme-line);
  background: color-mix(in srgb, var(--theme-surface-raised) 94%, transparent);
  box-shadow: 0 14px 38px rgb(var(--theme-shadow-rgb) / 0.14);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:hover:not(:disabled),
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:focus-visible,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:active:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--theme-muted);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:focus-visible {
  background: var(--theme-interactive-hover);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active:focus-visible {
  background: var(--theme-primary-wash);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:active:not(:disabled),
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active:active:not(:disabled) {
  background: var(--theme-interactive-active);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:focus-visible {
  outline: 2px solid rgb(var(--theme-focus-rgb) / 0.62);
  outline-offset: -2px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active::before,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active::after {
  background: var(--theme-primary);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab:hover:not(:disabled) {
    background: var(--theme-interactive-hover);
    color: var(--theme-primary-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .bottom-tab.is-active:hover:not(:disabled) {
    background: var(--theme-primary-wash);
    color: var(--theme-primary-strong);
  }
}

/* Settings and capture controls no longer fall back to the original green UI. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .settings-option-button:focus-visible {
  border-color: var(--theme-line-strong);
  background: var(--theme-interactive-hover);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .settings-option-button:active:not(:disabled) {
  background: var(--theme-interactive-active);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .settings-option-button:focus-visible {
  outline: 2px solid rgb(var(--theme-focus-rgb) / 0.52);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .settings-option-button:hover:not(:disabled) {
    border-color: var(--theme-line-strong);
    background: var(--theme-interactive-hover);
    color: var(--theme-ink);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .native-health-switch,
  .notification-preference-switch,
  .notification-system-card,
  .notification-permission-prompt-visual
) {
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .native-health-switch,
  .notification-preference-switch
):is(:hover, :focus-within) {
  border-color: var(--theme-line-strong);
  background: var(--theme-interactive-hover);
  box-shadow: var(--theme-focus-ring);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .native-health-switch-track,
  .notification-preference-track
) {
  border-color: var(--theme-line-strong);
  background: var(--theme-surface-soft);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .native-health-switch-track,
  .notification-preference-track
) > span {
  background: var(--theme-surface);
  box-shadow: 0 2px 7px rgb(var(--theme-shadow-rgb) / 0.24);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .native-health-switch,
  .notification-preference-switch
) input:checked + :is(.native-health-switch-track, .notification-preference-track) {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .native-health-switch,
  .notification-preference-switch
) input:focus-visible + :is(.native-health-switch-track, .notification-preference-track) {
  outline: 2px solid rgb(var(--theme-focus-rgb) / 0.62);
  outline-offset: 3px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-system-button {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-primary-strong);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-system-button:focus-visible {
  border-color: var(--theme-line-strong);
  background: var(--theme-interactive-hover);
  color: var(--theme-ink);
  box-shadow: var(--theme-focus-ring);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-system-button.primary,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-system-button.primary:focus-visible {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-on-primary);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-system-button:hover:not(:disabled) {
    border-color: var(--theme-line-strong);
    background: var(--theme-interactive-hover);
    color: var(--theme-ink);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-system-button.primary:hover:not(:disabled) {
    border-color: var(--theme-primary);
    background: var(--theme-primary);
    color: var(--theme-on-primary);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-permission-prompt-icon {
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
  box-shadow: 0 7px 18px rgb(var(--theme-shadow-rgb) / 0.12);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tabs {
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab:hover:not(:disabled),
html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--theme-muted);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab:focus-visible {
  background: var(--theme-interactive-hover);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab.is-active,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab.is-active:focus-visible {
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab:focus-visible {
  outline: 2px solid rgb(var(--theme-focus-rgb) / 0.56);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab:hover:not(:disabled) {
    background: var(--theme-interactive-hover);
    color: var(--theme-primary-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-mode-tab.is-active:hover:not(:disabled) {
    background: var(--theme-primary-soft);
    color: var(--theme-primary-strong);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mood-ai-button,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .mood-ai-button.is-loading {
  border-color: var(--theme-line);
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mood-ai-button:focus-visible {
  border-color: var(--theme-line-strong);
  background: var(--theme-interactive-hover);
  color: var(--theme-ink);
  box-shadow: var(--theme-focus-ring);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .mood-ai-button:active:not(:disabled) {
  background: var(--theme-interactive-active);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .mood-ai-button:hover:not(:disabled) {
    border-color: var(--theme-line-strong);
    background: var(--theme-interactive-hover);
    color: var(--theme-ink);
    box-shadow: var(--theme-focus-ring);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-button-progress {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--theme-on-primary) 10%, transparent),
      color-mix(in srgb, var(--theme-on-primary) 28%, transparent)
    ),
    color-mix(in srgb, var(--theme-on-primary) 8%, transparent);
  box-shadow: 10px 0 22px color-mix(in srgb, var(--theme-on-primary) 16%, transparent);
}

/* Every desktop sheet uses themed chrome, content and depth. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-backdrop,
  .community-comments-backdrop,
  .ai-summary-backdrop,
  .notification-backdrop,
  .policy-backdrop
).is-open {
  background: var(--theme-overlay);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
  backdrop-filter: blur(10px) saturate(1.06);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-panel,
  .community-comments-panel,
  .ai-summary-panel,
  .notification-panel,
  .policy-panel
) {
  border-color: var(--theme-line);
  background: var(--theme-surface);
  color: var(--theme-ink);
  box-shadow: var(--theme-dialog-shadow);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-header,
  .community-comments-modal-header,
  .ai-summary-header,
  .notification-header,
  .policy-header
) {
  border-bottom-color: var(--theme-line);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-primary-soft) 66%, var(--theme-surface)) 0%,
      var(--theme-surface) 74%
    );
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-header,
  .community-comments-modal-header,
  .ai-summary-header,
  .notification-header,
  .policy-header
) p {
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-header,
  .community-comments-modal-header,
  .ai-summary-header,
  .notification-header,
  .policy-header
) h2 {
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-content,
  .community-comments-content,
  .notification-content,
  .policy-content
) {
  background: var(--theme-surface);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-profile {
  border-bottom-color: var(--theme-line);
  background:
    linear-gradient(135deg, var(--theme-primary-wash), transparent 42%),
    var(--theme-surface);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-cover {
  background: var(--theme-surface-soft);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .community-detail-stats,
  .community-detail-trend,
  .community-detail-history-section,
  .community-reply-target
) {
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
  color: var(--theme-ink);
  box-shadow: none;
}

/* Comment rows are a text stream rather than raised cards. Keep the normal
   bubble transparent while allowing more-specific deleted and notification
   target states to retain their own backgrounds. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] :where(.community-comment-bubble) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comments-panel .community-comments {
  background: var(--theme-surface);
  color: var(--theme-ink);
}

/* The composer is a transparent layout row. Only its controls carry material;
   this prevents a rectangular strip from showing between the input and send
   button on compact sheets. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comments-panel .community-comment-form {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Comment controls use the selected palette in both appearances, replacing
   the legacy cyan glass input and fixed teal mobile send button. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > input {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-ink);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > input::placeholder {
  color: var(--theme-muted);
  opacity: 1;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > input:focus {
  border-color: var(--theme-focus);
  background: var(--theme-surface);
  color: var(--theme-ink);
  box-shadow: var(--theme-focus-ring);
  outline: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-reply-target {
  border-color: var(--theme-line);
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-reply-target button {
  border-color: transparent;
  background: transparent;
  color: var(--theme-primary-strong);
  box-shadow: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > button[type="submit"] {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-on-primary);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > button[type="submit"]:active:not(:disabled) {
  border-color: var(--theme-primary-strong);
  background: var(--theme-primary-strong);
  transform: translateY(1px);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > button[type="submit"]:disabled {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
  color: var(--theme-faint);
  opacity: 1;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > button[type="submit"]:focus-visible,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-reply-target button:focus-visible {
  box-shadow: var(--theme-focus-ring);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > input:hover:not(:focus) {
    border-color: var(--theme-line-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-form > button[type="submit"]:hover:not(:disabled) {
    border-color: var(--theme-primary-strong);
    background: var(--theme-primary-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-reply-target button:hover:not(:disabled) {
    background: var(--theme-interactive-hover);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-social-button:is(
    :hover:not(:disabled),
    :focus-visible
  ) {
    border-color: var(--theme-line-strong);
    background: var(--theme-interactive-hover);
    color: var(--theme-primary-strong);
    box-shadow: var(--theme-focus-ring);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-social-button:active:not(:disabled) {
    background: var(--theme-interactive-active);
    color: var(--theme-primary-strong);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-content {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--theme-primary-soft) 42%, var(--theme-surface)) 0%,
      var(--theme-surface) 34%
    );
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .ai-summary-output code,
  .ai-summary-output blockquote,
  .ai-summary-output .markdown-table-wrap
) {
  border-color: var(--theme-line);
  background: var(--theme-surface-raised);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-output .markdown-table-wrap :is(
  th,
  td
) {
  border-color: var(--theme-line);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-output .markdown-table-wrap th {
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-output blockquote {
  border-left-color: var(--theme-primary);
  color: var(--theme-muted);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .ai-summary-output.is-typing::after {
  border-right-color: var(--theme-primary);
}

/* Message center and push settings now share the selected palette. */
html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .notification-list,
  .notification-item
) {
  background: var(--theme-surface);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item:focus-visible {
  background: var(--theme-interactive-hover);
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item:focus-visible {
  outline: 2px solid rgb(var(--theme-focus-rgb) / 0.56);
  outline-offset: -2px;
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item:active:not(:disabled) {
  background: var(--theme-interactive-active);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item:hover {
    background: var(--theme-interactive-hover);
    color: var(--theme-ink);
  }
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-swipe-row.is-highlighted .notification-item {
  background: var(--theme-primary-wash);
  box-shadow: inset 3px 0 0 var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item::after {
  background: var(--theme-line);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item-icon {
  background: var(--theme-primary-soft);
  color: var(--theme-primary-strong);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item--reply .notification-item-icon {
  background: color-mix(in srgb, var(--theme-notification-reply) 14%, var(--theme-surface));
  color: var(--theme-notification-reply);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item--like .notification-item-icon {
  background: color-mix(in srgb, var(--theme-notification-like) 14%, var(--theme-surface));
  color: var(--theme-notification-like);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item--moderation .notification-item-icon {
  background: color-mix(in srgb, var(--theme-notification-moderation) 16%, var(--theme-surface));
  color: var(--theme-notification-moderation);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .notification-item-heading strong,
  .notification-item-actor
) {
  color: var(--theme-ink);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] :is(
  .notification-item-copy,
  .notification-item-heading time,
  .notification-loading,
  .notification-empty
) {
  color: var(--theme-muted);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-item-unread {
  border-color: var(--theme-surface);
  background: var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .notification-bell-dot {
  border-color: var(--theme-surface);
  background: var(--theme-primary);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button.is-danger,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-comment-action-button.is-danger:is(
  :hover,
  :focus-visible
) {
  border-color: color-mix(in srgb, var(--theme-danger) 46%, var(--theme-line));
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked,
html[data-theme="glass-porcelain-ink"][data-brand-theme] .community-detail-actions .community-like-button.is-liked:is(
  :hover,
  :focus-visible
) {
  border-color: color-mix(in srgb, var(--theme-like) 46%, var(--theme-line));
  background: var(--theme-like-soft);
  color: var(--theme-like-strong);
}

@media (min-width: 1440px) {
  html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard :is(
    .record-entry-icon,
    .replay-entry-icon
  ) {
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    background: var(--theme-primary-wash);
    color: var(--theme-primary-strong);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-meta {
    color: var(--theme-muted);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .dashboard .action-zone :is(
    .record-entry-button,
    .replay-launch-button
  ):focus-visible {
    border-color: var(--theme-line-strong);
    box-shadow: var(--theme-focus-ring);
    outline: none;
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-controls-pane {
    border: 1px solid var(--theme-line);
    border-radius: 20px;
    padding: 24px;
    background: var(--theme-surface);
    color: var(--theme-ink);
    box-shadow: 0 16px 42px rgb(var(--theme-shadow-rgb) / 0.10);
  }

  html[data-theme="glass-porcelain-ink"][data-brand-theme] .capture-controls-pane :is(
    .record-form,
    .food-record-panel
  ) {
    border-color: var(--theme-line);
  }
}