/*
 * Round 31b-small — b.SPX-inspired neutral app chrome.
 *
 * Keep this as the last stylesheet in index.html. The app's charts, spectra, PAR
 * visualisations, heatmaps, status colours, and channel controls use their own
 * explicit data colours and are intentionally not targeted here.
 */
:root {
  color-scheme: light;
  --background: 0 0% 96%;
  --foreground: 0 0% 10%;
  --border: 0 0% 82%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --card-border: 0 0% 88%;
  --sidebar: 0 0% 94%;
  --sidebar-foreground: 0 0% 10%;
  --sidebar-border: 0 0% 82%;
  --sidebar-primary: 0 0% 12%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 89%;
  --sidebar-accent-foreground: 0 0% 9%;
  --sidebar-ring: 0 0% 45%;
  --popover: 0 0% 98%;
  --popover-foreground: 0 0% 10%;
  --popover-border: 0 0% 82%;
  --primary: 0 0% 12%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 90%;
  --secondary-foreground: 0 0% 10%;
  --muted: 0 0% 91%;
  --muted-foreground: 0 0% 42%;
  --accent: 0 0% 88%;
  --accent-foreground: 0 0% 10%;
  --input: 0 0% 75%;
  --ring: 0 0% 45%;
}

.dark {
  color-scheme: dark;
  --background: 0 0% 4%;
  --foreground: 0 0% 92%;
  --border: 0 0% 18%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 92%;
  --card-border: 0 0% 16%;
  --sidebar: 0 0% 6%;
  --sidebar-foreground: 0 0% 92%;
  --sidebar-border: 0 0% 16%;
  --sidebar-primary: 0 0% 90%;
  --sidebar-primary-foreground: 0 0% 8%;
  --sidebar-accent: 0 0% 14%;
  --sidebar-accent-foreground: 0 0% 92%;
  --sidebar-ring: 0 0% 55%;
  --popover: 0 0% 10%;
  --popover-foreground: 0 0% 92%;
  --popover-border: 0 0% 18%;
  --primary: 0 0% 92%;
  --primary-foreground: 0 0% 6%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 92%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 62%;
  --accent: 0 0% 17%;
  --accent-foreground: 0 0% 92%;
  --input: 0 0% 28%;
  --ring: 0 0% 55%;
}

/* Native controls otherwise retain a browser-dependent blue accent. */
input:not([data-testid*="channel"]):not([data-testid*="par"]),
select,
textarea {
  accent-color: hsl(var(--primary));
}

/* Keep keyboard focus crisp and monochrome without changing geometry. */
:where(button, a, input, select, textarea):focus-visible {
  outline-color: hsl(var(--ring));
}

/* R35 — recalculation-required indicator.
 *
 * The only chromatic token in this stylesheet. It is scoped to the single
 * element that carries .list-recalc-blink (the calculate/recalculate button)
 * so the neutral b-spx palette above is untouched. Charts, spectra, PAR and
 * channel colours are unaffected.
 */
:root {
  --list-warn: 0 72% 44%;
}
.dark {
  --list-warn: 0 74% 52%;
}
@keyframes list-recalc-blink {
  0%, 100% {
    background-color: hsl(var(--list-warn));
    border-color: hsl(var(--list-warn));
    color: hsl(0 0% 100%);
    box-shadow: 0 0 0 0 hsl(var(--list-warn) / 0.55);
  }
  50% {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 0 0 6px hsl(var(--list-warn) / 0);
  }
}
.list-recalc-blink {
  animation: list-recalc-blink 1.05s ease-in-out infinite;
  --tw-ring-color: hsl(var(--list-warn));
}

/* round8-features-loader.js injects, at runtime,
 *   button[data-testid="button-recommend-sticky"] { animation: none !important }
 * to kill an old animate-pulse on this button. That is why the red blink was deferred in
 * earlier rounds: a plain class rule can never win against it. Requirement 4 asks for a blink
 * on exactly that button, so this out-specifies the R8-D rule (0,2,1 beats 0,1,1 at equal
 * importance) for the blink class alone -- animate-pulse on the same button stays dead.
 */
button[data-testid="button-recommend-sticky"].list-recalc-blink,
button[data-testid="button-auto-analyze-photo"].list-recalc-blink {
  animation: list-recalc-blink 1.05s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .list-recalc-blink {
    animation: none;
    background-color: hsl(var(--list-warn));
    border-color: hsl(var(--list-warn));
    color: hsl(0 0% 100%);
  }
  button[data-testid="button-recommend-sticky"].list-recalc-blink,
  button[data-testid="button-auto-analyze-photo"].list-recalc-blink {
    animation: none !important;
    background-color: hsl(var(--list-warn));
    border-color: hsl(var(--list-warn));
    color: hsl(0 0% 100%);
  }
}