/* Each palette supplies the existing design tokens, including native controls. */
body[data-palette="blush"] {
  --bg: #fce9f0;
  --card: #fff7fa;
  --text: #563344;
  --muted: #795766;
  --line: #ecd3de;
  --accent: #aa416e;
  --accent-soft: #f8dce9;
  --panel: #fff1f6;
  --shadow: #ae587016;
  --scene: #f6d8e5;
}

body[data-palette="lavender"] {
  --bg: #efeafa;
  --card: #fcfaff;
  --text: #40334f;
  --muted: #675275;
  --line: #dcd0ec;
  --accent: #73509c;
  --accent-soft: #e4d8f4;
  --panel: #f5effc;
  --shadow: #73509c18;
  --scene: #dfd2f1;
}

body[data-palette="sage"] {
  --bg: #e7efe6;
  --card: #f8fcf7;
  --text: #2f4835;
  --muted: #4b6250;
  --line: #c9ddcb;
  --accent: #3d7450;
  --accent-soft: #d4e7d6;
  --panel: #eef6ed;
  --shadow: #3d745018;
  --scene: #cee1ce;
}

body[data-palette="sky"] {
  --bg: #e5eff9;
  --card: #f7fbff;
  --text: #30465c;
  --muted: #4b6075;
  --line: #c9dcec;
  --accent: #366f9b;
  --accent-soft: #d3e6f5;
  --panel: #edf5fc;
  --shadow: #366f9b18;
  --scene: #ccdfef;
}

body[data-palette="peach"] {
  --bg: #f9eade;
  --card: #fffaf5;
  --text: #573d31;
  --muted: #715545;
  --line: #ead1bd;
  --accent: #a25234;
  --accent-soft: #f3dac5;
  --panel: #fff1e6;
  --shadow: #a2523418;
  --scene: #f0d5bc;
}

body[data-palette="plum"] {
  --bg: #241a35;
  --card: #30223f;
  --text: #f4eafa;
  --muted: #c0a9d1;
  --line: #50385f;
  --accent: #d4a0ee;
  --accent-soft: #50345f;
  --panel: #352546;
  --shadow: #130b202e;
  --scene: #503563;
}

body[data-palette="midnight"] {
  --bg: #151f33;
  --card: #1e2b44;
  --text: #e8f1fc;
  --muted: #b0c6e3;
  --line: #374d70;
  --accent: #9dc7ff;
  --accent-soft: #304969;
  --panel: #24344c;
  --shadow: #090f222e;
  --scene: #334f76;
}

body[data-palette="forest"] {
  --bg: #152a23;
  --card: #1e382e;
  --text: #e7f5e9;
  --muted: #b4d6bd;
  --line: #365949;
  --accent: #a1d6b1;
  --accent-soft: #315942;
  --panel: #243f33;
  --shadow: #081e162e;
  --scene: #345a43;
}

body[data-palette="cocoa"] {
  --bg: #2b201c;
  --card: #392b24;
  --text: #f9eddf;
  --muted: #ddc1aa;
  --line: #604739;
  --accent: #edbd91;
  --accent-soft: #604333;
  --panel: #413027;
  --shadow: #1b100d2e;
  --scene: #634835;
}

body[data-palette="rose"] {
  --bg: #301e29;
  --card: #402937;
  --text: #fbeaf1;
  --muted: #e0bbcb;
  --line: #654454;
  --accent: #f0b0cc;
  --accent-soft: #654053;
  --panel: #472e3c;
  --shadow: #200f1a2e;
  --scene: #694357;
}

body[data-palette="buttercup"] {
  --bg: #f7f0d8; --card: #fffdf3; --text: #4f442b; --muted: #615333;
  --line: #e5d8a8; --accent: #776218; --accent-soft: #efe2b3;
  --panel: #fcf6e5; --shadow: #77621818; --scene: #ead99a;
}
body[data-palette="mint"] {
  --bg: #e0f3ed; --card: #f5fffb; --text: #234b41; --muted: #3d6057;
  --line: #b7ddd0; --accent: #276f60; --accent-soft: #c9e9de;
  --panel: #eaf9f2; --shadow: #276f6018; --scene: #bcdfd2;
}
body[data-palette="coral"] {
  --bg: #fce8e3; --card: #fff8f5; --text: #61362f; --muted: #784d44;
  --line: #efc9bf; --accent: #aa453b; --accent-soft: #f7d3c9;
  --panel: #fff0ea; --shadow: #aa453b18; --scene: #f0c7bb;
}
body[data-palette="periwinkle"] {
  --bg: #e9edfc; --card: #f9faff; --text: #343e67; --muted: #4f5c81;
  --line: #cdd4ef; --accent: #535aab; --accent-soft: #dce2fb;
  --panel: #f1f3ff; --shadow: #535aab18; --scene: #cdd5f5;
}
body[data-palette="sand"] {
  --bg: #f1ece1; --card: #fdfbf6; --text: #4d4438; --muted: #62594a;
  --line: #ded4c1; --accent: #80643d; --accent-soft: #e7dcc6;
  --panel: #f8f3e9; --shadow: #80643d18; --scene: #e0d3b9;
}
body[data-palette="charcoal"] {
  --bg: #202226; --card: #2b2e34; --text: #f0f1f4; --muted: #c5c9d2;
  --line: #474c56; --accent: #c0c9de; --accent-soft: #414755;
  --panel: #31353c; --shadow: #1011152e; --scene: #454c59;
}
body[data-palette="ocean"] {
  --bg: #122a33; --card: #1a3944; --text: #e1f7fc; --muted: #b0d4de;
  --line: #325964; --accent: #87d5e6; --accent-soft: #2d5360;
  --panel: #21404b; --shadow: #081b232e; --scene: #315967;
}
body[data-palette="aubergine"] {
  --bg: #30182e; --card: #40233e; --text: #fceaf8; --muted: #e2bedb;
  --line: #663c62; --accent: #e7a7d7; --accent-soft: #613659;
  --panel: #482a43; --shadow: #210d202e; --scene: #68405f;
}
body[data-palette="ember"] {
  --bg: #301e16; --card: #402c21; --text: #fff0e0; --muted: #edc6a6;
  --line: #684835; --accent: #f6b783; --accent-soft: #643e29;
  --panel: #483126; --shadow: #210e082e; --scene: #6b4530;
}
body[data-palette="indigo"] {
  --bg: #211d40; --card: #2c2853; --text: #eeeefe; --muted: #c9c5ef;
  --line: #4c4777; --accent: #b9b5ff; --accent-soft: #474171;
  --panel: #332f5c; --shadow: #110d292e; --scene: #504979;
}

/* The mode buttons open their colour choices directly, including on phones. */
header { flex-wrap: wrap; gap: 16px; }
.header-actions { margin-left: auto; }
.theme-controls { display: flex; gap: 6px; }
.mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.mode-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.mode-button:hover { border-color: var(--accent); }
#theme-dialog { max-width: 620px; }
#theme-dialog .setting-note { margin: 10px 0 20px; font-size: 14px; }
.palette-groups { margin: 0; }
.palette-groups fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.palette-groups legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.palette-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.palette-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 86px;
  padding: 11px 3px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 14px;
}
.palette-chip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--palette-chip);
  box-shadow: inset 0 0 0 1px #0002;
}
.palette-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.palette-choice[aria-pressed="true"] .palette-chip::after { content: '✓'; color: #302238; font-size: 18px; }
.palette-choice[data-palette-mode="dark"] .palette-chip::after { color: #fff; }
.palette-choice:hover { border-color: var(--accent); }
.preset-card { grid-template-columns: minmax(0, 1fr); }
.preset-card select { width: 100%; }
.preset-card .setting-note { margin: 0; line-height: 1.6; }
.history-note { margin: 0 20px 14px; }
.history-list { max-height: 440px; overflow-y: auto; }
.quick-grid > *, .settings-grid > *, .timer-side, .bunny-side { min-width: 0; }
.focus-task { max-width: 100%; }
select:disabled { cursor: not-allowed; opacity: .5; }

@media (max-width: 1100px) {
  .brand-note { display: none; }
}
@media (max-width: 650px) {
  .header-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .mode-button { padding: 9px 10px; gap: 5px; }
  .palette-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duration-grid input { width: 62px; }
  .settings-grid .setting-block:nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .mode-button { padding: 9px 8px; font-size: 13px; }
  .palette-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .palette-choice { min-height: 74px; padding: 8px; }
}