/* One selected gradient supplies the canvas and the related interface accents. */
html[data-gradient] { background-image: var(--gradient-background); background-attachment: fixed; }
html:is([data-gradient], [data-palette]), html:is([data-gradient], [data-palette]) body {
  --accent: var(--gradient-accent); --hero: var(--gradient-hero); --info: var(--gradient-accent);
  --blue-soft: var(--gradient-soft); --blue-mid: var(--gradient-mid); --blue-pale: var(--gradient-pale);
  --line: var(--gradient-line);
  --d-id: var(--gradient-accent); --d-ep: var(--gradient-accent); --d-nw: var(--gradient-accent);
  --d-cd: var(--gradient-accent); --d-so: var(--gradient-accent); --d-sv: var(--gradient-accent);
}
html:is([data-gradient], [data-palette])[data-theme="light"] body { --accent-fg: white; }
html:is([data-gradient], [data-palette])[data-theme="dark"] body { --accent-fg: #111a2b; }
html:is([data-gradient], [data-palette]) .today .day-card-actions .btn-primary { color: var(--hero); }
/* Text on the canvas gets its own solid surface: gradients may contain both black and white. */
html[data-gradient] :is(.page-head, .operations-heading, .settings-toc, .program-intro, .program-legend, .tab-list, .day-navigation, .brief-sources, .brief-check, .lab-actions, .ops-toolbar, .auth, .boot-error),
html[data-gradient] #stage > :is(.page, .operations-page) > :is(p, .form-status, .ops-notice, .ops-empty) {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: var(--shadow-1);
}
html[data-gradient] .page-head :is(h1, h2, p), html[data-gradient] .operations-heading :is(h1, p) { background: transparent; }
html[data-gradient] .settings-toc { padding: 16px; }
html[data-gradient] :is(.tab-list, .day-navigation, .lab-actions, .ops-toolbar) { padding: 16px; }
html[data-gradient] #stage > :is(.page, .operations-page) > a:not(.btn) {
  justify-self: start; align-self: start; width: fit-content; max-width: 100%;
  padding: 12px 20px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px;
}
.gradient-setting { display: grid; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.gradient-setting h3 { margin: 0; font-size: 16px; }
.gradient-current { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.gradient-current > div { flex: 1; min-width: 150px; }
.gradient-current-swatch { width: 76px; height: 60px; flex: none; border-radius: 16px; border: 1px solid var(--line-strong); }
.gradient-current strong { display: block; margin-bottom: 5px; }
.gradient-status { font-size: 13px; line-height: 1.5; }
.gradient-status:empty { display: none; }
.modal:has(.gradient-chooser) { width: min(900px, calc(100vw - 32px)); max-width: 900px; }
.gradient-chooser { display: grid; gap: 18px; }
.gradient-chooser > input { width: 100%; max-width: none; }
.gradient-preview { min-height: 150px; padding: 24px; border-radius: 20px; border: 1px solid var(--line-strong); display: grid; place-items: center; }
.gradient-preview-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px; border-radius: 16px; background: var(--bg-1); color: var(--fg-0); box-shadow: var(--shadow-2); min-width: min(100%, 280px); }
.gradient-preview-button { padding: 10px 16px; border-radius: 99px; color: white; font-size: 13px; font-weight: 600; }
.gradient-result-count { font-size: 13px; color: var(--fg-2); }
.gradient-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gradient-option { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg-1); color: var(--fg-0); text-align: left; font-size: 13px; min-width: 0; cursor: pointer; }
.gradient-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gradient-option-swatch { height: 56px; border-radius: 8px; border: 1px solid rgb(0 0 0 / .12); }
.gradient-option > span:last-child { padding: 0 2px 4px; overflow-wrap: anywhere; }
.gradient-pagination { display: flex; justify-content: space-between; gap: 16px; }
.gradient-no-results { grid-column: 1 / -1; padding: 24px 0; }
.interface-colors { display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 10px; }
.interface-color-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.interface-color-field { display: grid; gap: 10px; font-size: 14px; }
.interface-color-field > span:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.interface-color-field input[type="color"] { width: 56px; height: 44px; padding: 4px; cursor: pointer; border-radius: 12px; }
.interface-hex { font-family: var(--font-mono); font-size: 12px; }
.interface-preview { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.interface-feature { padding: 22px; color: white; font-weight: 650; }
.interface-preview > div:last-child { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px; }
.interface-highlight { border-radius: 12px; padding: 10px 16px; }
.interface-color-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
  .interface-color-fields { grid-template-columns: 1fr; }
  .gradient-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gradient-preview { min-height: 120px; padding: 16px; }
  .gradient-current .btn { width: 100%; }
}
@media print { html[data-gradient] { background: white; box-shadow: none; } }