/* Polymorphic: the "signal" look, the site's default (<html data-look="signal">; ?look=mono shows the page without it).
 *
 * One rule: the page stays black and the type stays bone; colour lives inside the instruments, and it always means
 * something. That is how nemradar.com and the pieces we admire spend it: neutral furniture, luminous marks.
 *   cool  (ice to indigo)  what a model is looking at: a surface, a field, a population, drawn along a ramp by its own value
 *   heat  (vermilion)      what it flags: a damaged form, a spike, a risk; and so also the one thing to act on
 *   mint                   what it has put right: restored cells, a fixed point, a check that passed
 * A piece of work may bring its own hue (data-pal, or a card's data-hue), but only into its own figures and label.
 * No tinted grounds, no gradient type, no filled buttons. Every hue here is already in the WEFT Research palettes.
 * The drawings read these tokens through LAB.signal() (assets/lab/lab.js) and the tone() of site.js. */

[data-look="signal"] {
  --heat: #ff6a2b; --heat-ink: #ff9a6b;
  --mint: #3fd49a; --mint-ink: #84e9c2;
  --deep: #8f89ff; --deep-ink: #b9b4ff; --ice: #a8dcff;
  --sig: var(--heat); --sig-ink: var(--heat-ink); --lab: var(--deep);
  /* read by the drawings: the cool ramp, most prominent colour first; a reading from sound to wrong; a found thing from broken to fixed */
  --sg-ramp: #e6f7ff, #a8dcff, #86b8ff, #8f89ff, #6d66f6, #4a43c9;   /* pale at the heart, deepening to indigo */
  --sg-err: #eceae6, #ffb14a, #ff6a2b;
  --sg-tone: #ff6a2b, #ffa978, #ece8e0, #9fe8cb, #3fd49a;            /* heat cools through bone to mint, never through a muddy green */
}
/* on paper the same hues are inks: deepened for contrast, and the ramp runs dark to pale so the heart still carries the form */
[data-look="signal"][data-theme="light"] {
  --heat: #d9480f; --heat-ink: #b53d0d;
  --mint: #0b8a5c; --mint-ink: #0a6e4a;
  --deep: #4a43d6; --deep-ink: #3a34a8; --ice: #2f66c4;
  --sg-ramp: #15130f, #1c1a44, #2c2878, #4039b8, #6d66f6, #a39eff;
  --sg-err: #36322b, #b46a00, #d9480f;
  --sg-tone: #d9480f, #b0623a, #36322b, #2b6b52, #0b8a5c;
}

/* ------------------------------------------------------------------ work that brings its own hue: figures and label only */
/* data-pal on a card or a row (a card that already carries its demo's own colour, data-hue, keeps that instead);
   data-case on a case study's own results, so its figures match its card in the library */
[data-look="signal"] :is([data-pal="holo"]:not([data-hue]), [data-case="holo"])             { --sig: #36b8ff; --sig-ink: #92d6ff; }
[data-look="signal"] :is([data-pal="landscape"]:not([data-hue]), [data-case="landscape"])   { --sig: #ff6a2b; --sig-ink: #ff9a6b; }
[data-look="signal"] :is([data-pal="terra"]:not([data-hue]), [data-case="terra"])           { --sig: #b4e03a; --sig-ink: #d2ef7c; }
[data-look="signal"] :is([data-pal="powerlines"]:not([data-hue]), [data-case="powerlines"]) { --sig: #ffa11f; --sig-ink: #ffc266; --lab: #9ad6ff; }
[data-look="signal"] :is([data-pal="hypo"]:not([data-hue]), [data-case="hypo"])             { --sig: #3fd49a; --sig-ink: #84e9c2; }
[data-look="signal"][data-theme="light"] :is([data-pal="holo"]:not([data-hue]), [data-case="holo"])             { --sig: #0a74c4; --sig-ink: #085e9e; }
[data-look="signal"][data-theme="light"] :is([data-pal="landscape"]:not([data-hue]), [data-case="landscape"])   { --sig: #d9480f; --sig-ink: #b53d0d; }
[data-look="signal"][data-theme="light"] :is([data-pal="terra"]:not([data-hue]), [data-case="terra"])           { --sig: #5c8f00; --sig-ink: #4a7300; }
[data-look="signal"][data-theme="light"] :is([data-pal="powerlines"]:not([data-hue]), [data-case="powerlines"]) { --sig: #c26f00; --sig-ink: #9c5800; --lab: #1d7fa8; }
[data-look="signal"][data-theme="light"] :is([data-pal="hypo"]:not([data-hue]), [data-case="hypo"])             { --sig: #148a5f; --sig-ink: #0f6e4b; }
/* NEM Radar's tape keeps nemradar's meaning: amber is a price above $300 (sky is kept for prices below zero) */
[data-look="signal"] [data-pal="powerlines"] :is(.thumb, .nem-card__loom) { --lab: var(--sig); }

/* ------------------------------------------------------------------ the furniture: pinpoints only */
[data-look="signal"] .brand__mark .weft { color: var(--heat); }                       /* the mark as nemradar.com already shows it */
[data-look="signal"] ::selection { background: color-mix(in srgb, var(--heat) 42%, transparent); }

/* an instrument's readouts follow its run: cool while the model looks, heat when it finds, mint when it has fixed.
   The drawing sets --tone on its .inst; until it does, the state reads cool. */
[data-look="signal"] .inst .state strong { color: var(--tone, var(--ice)); transition: color .5s ease; }
[data-look="signal"] .inst .state::before, [data-look="signal"] .inst .state::after { border-color: var(--tone, var(--ice)); transition: border-color .5s ease; }
[data-look="signal"] .inst .brk span:first-child { color: var(--deep-ink); }

/* labels that name an instrument or a part of the page are cool; heat is kept for what the reader should look at or act on */
[data-look="signal"] .plate-cap .label, [data-look="signal"] .plate__no, [data-look="signal"] .card__body > .hud-k { color: var(--deep-ink); }
[data-look="signal"] .aside::first-line { color: var(--deep-ink); }
[data-look="signal"] body[data-page="home"] .plate-cap .label { color: var(--heat-ink); }   /* the home plate's label says Live */
[data-look="signal"] body[data-page="home"] .plate-cap .label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--heat); vertical-align: 1px; animation: pulse 2.4s ease-in-out infinite; }

/* home, how we work: the numbers stay quiet and each rule starts with a short heat tick */
[data-look="signal"] .how__cols .n { color: var(--mut); }
[data-look="signal"] .how__cols li { position: relative; }
[data-look="signal"] .how__cols li::before { content: ''; position: absolute; left: 0; top: -1px; width: 26px; height: 1px; background: var(--heat); }

/* results wear their own case's hue, with a dot on the label to tie figure and sector together */
[data-look="signal"] .proof__list a[data-pal] .hud-k::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--sig); vertical-align: 1px; }
[data-look="signal"] .proof__list a:hover { background: color-mix(in srgb, var(--sig) 6%, transparent); }

/* the closing call: the page's one field of colour, hatched (signal.js draws it), under clean type */
[data-look="signal"] .close { isolation: isolate; overflow: hidden; }
[data-look="signal"] .close > :not(.sg-field) { position: relative; z-index: 1; }
[data-look="signal"] .close::before, [data-look="signal"] .close::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--heat); pointer-events: none; z-index: 2; }
[data-look="signal"] .close::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
[data-look="signal"] .close::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
[data-look="signal"] .close .btn--primary { background: color-mix(in srgb, var(--bg) 82%, transparent); }
[data-look="signal"] .close .btn--primary:hover { background: var(--sig); }
.sg-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
:root:not([data-look="signal"]) .sg-field { display: none; }

@media (prefers-reduced-motion: reduce) { [data-look="signal"] body[data-page="home"] .plate-cap .label::before { animation: none; } }