/* Day/night colors and the illustrated header switch. */
@property --theme-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Animate the palette once. Every surface uses exactly the same progress,
   including inherited text, tags, hover colours, and the illustrated switch. */
:root {
  color-scheme: light;
  --theme-progress: 0;
  --theme-transition-duration: .6s;
  --theme-night-weight: calc(var(--theme-progress) * 100%);
  /* YouTube-style neutral dark surfaces; the light endpoints stay classic AO3. */
  --paper: color-mix(in srgb, #0f0f0f var(--theme-night-weight), #fff);
  --white: color-mix(in srgb, #181818 var(--theme-night-weight), #fff);
  --ink: color-mix(in srgb, #f1f1f1 var(--theme-night-weight), #302828);
  --muted: color-mix(in srgb, #aaa var(--theme-night-weight), #756b69);
  --line: color-mix(in srgb, #3f3f3f var(--theme-night-weight), #ccc);
  --accent: color-mix(in srgb, #f1f1f1 var(--theme-night-weight), #822626);
  --accent-dark: color-mix(in srgb, #f1f1f1 var(--theme-night-weight), #822626);
  --wash: color-mix(in srgb, #272727 var(--theme-night-weight), #f2e6e2);
  --sidebar: color-mix(in srgb, #212121 var(--theme-night-weight), #e9e9e9);
  --control: color-mix(in srgb, #272727 var(--theme-night-weight), #efefef);
  --error: color-mix(in srgb, #ffb4ab var(--theme-night-weight), #9b4235);
  --theme-masthead: color-mix(in srgb, #0f0f0f var(--theme-night-weight), #fff);
  --theme-header: color-mix(in srgb, #0f0f0f var(--theme-night-weight), #822626);
  --theme-header-ink: color-mix(in srgb, #f1f1f1 var(--theme-night-weight), #fff8f2);
  --theme-brand: color-mix(in srgb, #ff0033 var(--theme-night-weight), #822626);
  --theme-button-top: color-mix(in srgb, #272727 var(--theme-night-weight), #fff);
  --theme-heading: color-mix(in srgb, #f1f1f1 var(--theme-night-weight), #000);
  --theme-search-border: color-mix(in srgb, #303030 var(--theme-night-weight), #bca29a);
  --theme-placeholder: color-mix(in srgb, #aaa var(--theme-night-weight), #8b807c);
  --theme-field-placeholder: color-mix(in srgb, #aaa var(--theme-night-weight), #757575);
  --theme-loader: color-mix(in srgb, rgb(15 15 15 / 76%) var(--theme-night-weight), rgb(248 245 241 / 65%));
  --theme-spinner: color-mix(in srgb, rgb(241 241 241 / 25%) var(--theme-night-weight), rgb(128 38 38 / 20%));
  --theme-summary: color-mix(in srgb, #ccc var(--theme-night-weight), #755c55);
  --theme-error-background: color-mix(in srgb, #332222 var(--theme-night-weight), #f4eae3);
  --theme-switch-background: color-mix(in srgb, #272727 var(--theme-night-weight), #46a6df);
  --theme-thumb-background: color-mix(in srgb, #d9d9d9 var(--theme-night-weight), #ffda2f);
  --theme-thumb-border: color-mix(in srgb, #f1f1f1 var(--theme-night-weight), #ffe785);
  --theme-thumb-shadow: color-mix(in srgb, #aaa var(--theme-night-weight), #e6a425);
  /* theme.js advances the shared progress so visited-link colours repaint too. */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-progress: 1;
}

/* Avoid starting a second colour transition on each frame of the palette fade. */
button, .work-blurb { transition: none; }
button { background: linear-gradient(var(--theme-button-top), var(--control)); }
.site-header { background: var(--theme-masthead); }
.wordmark { color: var(--accent-dark); }
.fish-scene { color: var(--theme-brand); }
.archive-navigation, footer { color: var(--theme-header-ink); }
.browse-link:focus-visible { outline-color: var(--theme-header-ink); }
.search-box { border-color: var(--theme-search-border); }
input::placeholder, textarea::placeholder { color: var(--theme-field-placeholder); opacity: 1; }
.search-box input::placeholder { color: var(--theme-placeholder); }
.author-link { text-decoration-color: currentColor; }
.results-loader { background: var(--theme-loader); }
.loading-spinner { border-color: var(--theme-spinner); border-top-color: var(--accent-dark); }
.work-summary { color: var(--theme-summary); }
.error { background: var(--theme-error-background); }

.theme-toggle {
  --switch-width: 86px;
  --switch-height: 38px;
  --thumb-size: 30px;
  position: relative;
  flex: none;
  width: var(--switch-width);
  height: var(--switch-height);
  margin-left: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: var(--theme-switch-background);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 45%), 0 1px 1px rgb(255 255 255 / 35%);
  isolation: isolate;
}
.theme-toggle:hover:not(:disabled) { background: var(--theme-switch-background); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-thumb {
  position: absolute;
  z-index: 2;
  left: 3px;
  top: 3px;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border: 1px solid var(--theme-thumb-border);
  border-radius: 50%;
  background: var(--theme-thumb-background);
  box-shadow: inset 0 -1px 2px var(--theme-thumb-shadow), 0 1px 3px rgb(0 0 0 / 40%),
    0 0 0 9px rgb(255 255 255 / 15%), 0 0 0 18px rgb(255 255 255 / 12%), 0 0 0 27px rgb(255 255 255 / 10%);
  transform: translateX(calc((var(--switch-width) - var(--switch-height)) * var(--theme-progress)));
}
.theme-clouds {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 65%, #f5f8fc 0 12px, transparent 12.5px),
    radial-gradient(circle at 78% 100%, #f5f8fc 0 12px, transparent 12.5px),
    radial-gradient(circle at 55% 110%, #f5f8fc 0 13px, transparent 13.5px),
    radial-gradient(circle at 100% 35%, #cce6f6 0 12px, transparent 12.5px),
    radial-gradient(circle at 69% 86%, #cce6f6 0 11px, transparent 11.5px);
  transform: translateY(calc(100% * var(--theme-progress)));
  opacity: calc(1 - var(--theme-progress));
}
.theme-stars {
  position: absolute;
  inset: 0;
  color: #fff;
  opacity: var(--theme-progress);
  transform: translateY(calc(-100% * (1 - var(--theme-progress))));
}
.theme-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.theme-stars i:nth-child(1) { left: 10px; top: 23px; }
.theme-stars i:nth-child(2) { left: 25px; top: 9px; }
.theme-stars i:nth-child(3) { left: 37px; top: 25px; }
.theme-stars i:nth-child(4) { left: 18px; top: 12px; width: 6px; height: 6px; border-radius: 0; clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
.theme-stars i:nth-child(5) { left: 34px; top: 13px; width: 4px; height: 4px; }
.theme-thumb i {
  position: absolute;
  border-radius: 50%;
  background: #aaa;
  box-shadow: inset 0 1px 1px rgb(64 64 64 / 20%);
  opacity: var(--theme-progress);
}
.theme-thumb i:nth-child(1) { width: 10px; height: 10px; left: 4px; top: 10px; }
.theme-thumb i:nth-child(2) { width: 5px; height: 5px; left: 14px; top: 4px; }
.theme-thumb i:nth-child(3) { width: 7px; height: 7px; right: 3px; bottom: 4px; }
@media (max-width: 760px) {
  .theme-toggle { --switch-width: 76px; --switch-height: 34px; --thumb-size: 26px; }
  .theme-thumb i:nth-child(1) { width: 8px; height: 8px; top: 8px; }
  .theme-thumb i:nth-child(2) { left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --theme-transition-duration: 0s; }
}