/* Today reactor + chip colors, one per data view. --rx is the Night color, --rxd the darker Day one; --rxc is the one in use.
   Not read by make_day_css.py, so the Day shades below are the final ones. */
.reactor[data-view],.hchip[data-view]{--rxc:var(--rx,var(--ring-a,#D4B483))}
html[data-theme-active="day"] .reactor[data-view],html[data-theme-active="day"] .hchip[data-view]{--rxc:var(--rxd)}
[data-view="profit"]{--rx:#4FD18B;--rxd:#1B7F4C}
[data-view="deals"]{--rx:#5BB8F0;--rxd:#1A6FA3}
[data-view="offers"]{--rx:#F2A541;--rxd:#9A5F0A}
[data-view="pipeline"]{--rx:#21C7D9;--rxd:#0E7683}
[data-view="lead"]{--rx:#D4B483;--rxd:#8A6422}
[data-view="attention"]{--rx:#FF7A66;--rxd:#B83A27}
[data-view="progress"]{--rx:#A98BFF;--rxd:#6A45D6}

.reactor[data-view]:not(.hot):not(.u-hot) .r1 circle,.reactor[data-view] .hub{stroke:var(--rxc);transition:stroke .5s ease,filter .5s ease}
.reactor[data-view]:not(.hot):not(.u-hot) .r1 circle{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--rxc) 60%,transparent))}
.reactor[data-view]:not(.hot):not(.u-hot) .r3 circle,.reactor[data-view] .r2 circle{stroke:var(--rxc);transition:stroke .5s ease}
.reactor[data-view] .tk,.reactor[data-view] .tk2{stroke:var(--rxc);transition:stroke .5s ease}
.reactor[data-view] .tk{stroke-opacity:.35}
.reactor[data-view]:not(.u-hot) .prog{stroke:var(--rxc);filter:drop-shadow(0 0 8px var(--rxc)) !important;transition:stroke .5s ease,filter .5s ease,stroke-dashoffset .6s ease}
.reactor[data-view] circle[stroke-width="7"]:not(.prog){stroke:color-mix(in srgb,var(--rxc) 18%,transparent)}
.reactor[data-view] .lbl span{color:var(--rxc);transition:color .5s ease}
.reactor[data-view] .lbl b:not(.hot){text-shadow:0 0 24px color-mix(in srgb,var(--rxc) 80%,transparent),0 0 60px color-mix(in srgb,var(--rxc) 40%,transparent);transition:text-shadow .5s ease}
html[data-theme-active="day"] .reactor[data-view] .lbl b:not(.hot){text-shadow:0 0 24px color-mix(in srgb,var(--rxc) 45%,transparent)}
.hchip[data-view]{transition:border-color .5s ease,box-shadow .5s ease,background-color .5s ease}
.hchip[data-view].on{border-color:var(--rxc);background:color-mix(in srgb,var(--rxc) 14%,transparent);box-shadow:0 0 14px -4px var(--rxc)}
html[data-theme-active="day"] .hchip[data-view].on{background:color-mix(in srgb,var(--rxc) 12%,transparent);border-color:var(--rxc)}
.hchip[data-view]:focus-visible{outline-color:var(--rxc)}
@media (prefers-reduced-motion:reduce){.reactor[data-view] *,.hchip[data-view]{transition:none !important}}
/* Day themes recolor ticks and hub with higher specificity; the view color wins there too. */
html[data-theme-active="day"] .reactor[data-view] .tk,html[data-theme-active="day"] .reactor[data-view] .tk2,
html[data-theme-active="day"][data-day-style] .focus .reactor[data-view] .tk,html[data-theme-active="day"][data-day-style] .focus .reactor[data-view] .tk2,
html[data-day-kit="clean"][data-theme-active="day"] .reactor[data-view] .tk,html[data-day-kit="clean"][data-theme-active="day"] .reactor[data-view] .tk2,
html[data-day-kit="clean"][data-theme-active="day"] .focus .reactor[data-view] .tk,html[data-day-kit="clean"][data-theme-active="day"] .focus .reactor[data-view] .tk2{stroke:var(--rxc)}
html[data-theme-active="day"] .reactor[data-view] .hub,html[data-theme-active="day"][data-day-style] .focus .reactor[data-view] .hub,
html[data-day-kit="clean"][data-theme-active="day"] .reactor[data-view] .hub{stroke:var(--rxc)}

/* Profit view: monthly goals as labeled progress rows, apart from the money boxes. */
.herogoals{margin-top:14px;display:grid;gap:8px;max-width:420px}
.herogoals .hg-h{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.hg-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:9px 14px;border:1px solid var(--line2);border-radius:10px;box-sizing:border-box;width:100%;background:transparent;color:var(--text1);text-align:left;cursor:pointer}
.hg-row.on,.hg-row:hover{border-color:var(--line3)}
.hg-row .l{font-size:13px}.hg-row .n{font:600 13px var(--mono);padding-right:2px;white-space:nowrap}
.hg-row .bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--line2);overflow:hidden}
.hg-row .bar i{display:block;height:100%;background:var(--rx,var(--accent));border-radius:2px;transition:width .4s ease}
@media (prefers-reduced-motion:reduce){.hg-row .bar i{transition:none}}