/* Compact swatches keep the focus on the native app preview. */
.appearance-control.theme-preview-controls {
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:224px; gap:4px; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  color:#3f503b;
}
.theme-preview-controls .theme-palette-group {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; width:100%;
}
.theme-preview-controls .theme-palette-button {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; min-width:44px; min-height:56px; width:100%; padding:5px 2px;
  border:0; border-radius:12px; background:transparent; color:#667160; box-shadow:none;
  font-size:10px; line-height:15px; font-weight:450;
  transition:color .2s;
}
.theme-preview-controls .theme-palette-button:is(:hover,[aria-pressed="true"]) {
  color:#2f432c; background:transparent; box-shadow:none;
}
.palette-swatch {
  position:relative; display:block; flex-shrink:0; width:22px; height:22px;
  border:0; border-radius:50%; background:var(--swatch-color);
  box-shadow:inset 0 0 0 1px #25331d12;
  transition:transform .2s;
}
.palette-swatch::after {
  content:''; position:absolute; inset:-4px; border:1px solid #52664a;
  border-radius:50%; opacity:0; transform:scale(.9);
  transition:opacity .2s,transform .2s;
}
.theme-palette-button[aria-pressed="true"] .palette-swatch::after {opacity:1;transform:scale(1);}
.theme-palette-button[aria-pressed="true"] .palette-name {font-weight:600;}
.theme-palette-button:hover .palette-swatch {transform:translateY(-1px);}
.theme-palette-button:active .palette-swatch {transform:scale(.94);}
.theme-preview-controls .theme-mode-group {
  position:relative; isolation:isolate; display:flex; padding:3px;
  border:0; border-radius:30px; background:#e4eadd80;
}
.theme-mode-group::before {
  content:''; position:absolute; left:3px; top:3px; bottom:3px;
  width:calc((100% - 6px)/2); border-radius:23px; background:#fff;
  transition:transform .25s cubic-bezier(.2,.8,.2,1); z-index:-1;
}
#daily-product[data-theme-mode="dark"] .theme-mode-group::before {transform:translateX(100%);}
.theme-preview-controls .theme-mode-button {
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:64px; min-height:34px; padding:7px 9px; border:0; border-radius:23px;
  font-size:10px; color:#697562; background:transparent; box-shadow:none;
  transition:color .2s;
}
.theme-preview-controls .theme-mode-button:is([aria-pressed="true"],:hover,:focus-visible) {
  color:#30452c; background:transparent; box-shadow:none;
}
.theme-mode-button svg {width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;}
.theme-preview-controls button:focus-visible {outline:2px solid #3f5737;outline-offset:3px;}
.theme-preview-caption.sr-only {min-height:0;}
/* Stable swatches identify the palette independently of light/dark appearance. */
.theme-palette-button[data-theme-palette="cream"] {--swatch-color:#e7ddc8;}
.theme-palette-button[data-theme-palette="pine"] {--swatch-color:#688b73;}
.theme-palette-button[data-theme-palette="tide"] {--swatch-color:#77a7b3;}
.theme-palette-button[data-theme-palette="heather"] {--swatch-color:#ae93b6;}
.theme-palette-button[data-theme-palette="cream"] {--sample-bg:#F3EEE5;--sample-line:#BCB3A6;--sample-primary:#315831;--sample-support:#4A6642;--sample-warm:#9E4429;--sample-ink:#251F1A;}
#daily-product[data-theme-mode="dark"] .theme-palette-button[data-theme-palette="cream"] {--sample-bg:#17130F;--sample-line:#4A3E32;--sample-primary:#7CA475;--sample-support:#9DB78F;--sample-warm:#E69673;--sample-ink:#F1E7D2;}
.theme-palette-button[data-theme-palette="pine"] {--sample-bg:#C7DACB;--sample-line:#9AAE9D;--sample-primary:#064F3A;--sample-support:#1E663C;--sample-warm:#704726;--sample-ink:#13231B;}
#daily-product[data-theme-mode="dark"] .theme-palette-button[data-theme-palette="pine"] {--sample-bg:#06100D;--sample-line:#30483D;--sample-primary:#5CD4AC;--sample-support:#68B880;--sample-warm:#D07850;--sample-ink:#E0F2EA;}
.theme-palette-button[data-theme-palette="tide"] {--sample-bg:#D1E4E1;--sample-line:#9BBAB5;--sample-primary:#176A72;--sample-support:#256D64;--sample-warm:#9E4429;--sample-ink:#14242D;}
#daily-product[data-theme-mode="dark"] .theme-palette-button[data-theme-palette="tide"] {--sample-bg:#071016;--sample-line:#30404A;--sample-primary:#6BAFC8;--sample-support:#68A8BC;--sample-warm:#E69673;--sample-ink:#E0F0F5;}
.theme-palette-button[data-theme-palette="heather"] {--sample-bg:#E7E2EA;--sample-line:#AEA4B3;--sample-primary:#5B365F;--sample-support:#4E6654;--sample-warm:#9E4429;--sample-ink:#241D28;}
#daily-product[data-theme-mode="dark"] .theme-palette-button[data-theme-palette="heather"] {--sample-bg:#151117;--sample-line:#4E4553;--sample-primary:#C097C6;--sample-support:#9EB79F;--sample-warm:#E69673;--sample-ink:#F1EAF3;}
#daily-product .daily-phone { position: relative; }
#daily-product #app-screen { aspect-ratio: 1320 / 2868; }
#daily-product .theme-preview-outgoing {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border-radius: 25px;
  object-fit: cover;
  pointer-events: none;
}
#daily-product[data-theme-palette="cream"]::before { background: #e8e4d9; }
#daily-product[data-theme-palette="pine"]::before { background: #dce7d4; }
#daily-product[data-theme-palette="tide"]::before { background: #dbe9e9; }
#daily-product[data-theme-palette="heather"]::before { background: #e7e0ed; }
#daily-product[data-theme-palette="cream"][data-theme-mode="dark"]::before { background: #d0c8ba; }
#daily-product[data-theme-palette="pine"][data-theme-mode="dark"]::before { background: #bdcfbd; }
#daily-product[data-theme-palette="tide"][data-theme-mode="dark"]::before { background: #bfcfd4; }
#daily-product[data-theme-palette="heather"][data-theme-mode="dark"]::before { background: #cdc2d9; }
@media(max-width:700px) {
 .theme-preview-controls .theme-mode-button {min-height:44px;}
}
@media(prefers-reduced-motion:reduce) {
 .theme-preview-controls *, .theme-preview-controls *::before, .theme-preview-controls *::after, #daily-product::before {transition:none!important;}
 .theme-preview-controls .palette-swatch {transform:none!important;}
}