/* NEU-538: the test drawings and area dot fields (window.NeuropsychTestArt in
   neuropsych-test-art.js) and the area colour classes they read. Tokens only:
   no :root, no literal colours. Each area class sets --c from the style guide's
   domain tokens (4.4) and three tints mixed from it (--soft, --field, --edge).
   A drawing is a 120 x 80 svg in the test-page stimulus language
   (catalog/test-pages/art): outlined parts in ink, the active part in --c. */

/* Area colours, keyed by catalog area id */
.a-speed{--c:var(--d-speed)}
.a-wm{--c:var(--d-memory)}
.a-ef{--c:var(--d-executive)}
.a-fluid{--c:var(--d-reasoning)}
.a-verbal{--c:var(--d-verbal)}
.a-num{--c:var(--d-number)}
.a-attn{--c:var(--d-attention)}
:is(.a-speed,.a-wm,.a-ef,.a-fluid,.a-verbal,.a-num,.a-attn){--soft:var(--surface);--field:var(--surface-2);--edge:var(--line-strong);--edge-h:var(--c)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  :is(.a-speed,.a-wm,.a-ef,.a-fluid,.a-verbal,.a-num,.a-attn){--soft:color-mix(in srgb,var(--c) 6%,var(--surface));--field:color-mix(in srgb,var(--c) 10%,var(--surface));--edge:color-mix(in srgb,var(--c) 22%,transparent);--edge-h:color-mix(in srgb,var(--c) 55%,transparent)}
}

/* Test drawings (svg.ex): one class set for all 29 */
.ex{display:block;width:auto;max-width:100%;height:100%;overflow:visible}
.ex text{font:700 14px/1 var(--font-body);text-anchor:middle;fill:var(--ink)}
.ex .ts{font-size:11px}
.ex .tm{font-size:16px}
.ex .tl{font-size:22px;font-weight:800}
.ex .tx{font-size:30px;font-weight:800}
.ex .st{text-anchor:start}
.ex .w6{font-weight:600}
.ex .o{fill:var(--surface);stroke:var(--ink);stroke-width:1.75}
.ex .nx{fill:var(--surface);stroke:var(--c);stroke-width:2.5}
.ex .hd{fill:var(--field);stroke:var(--c);stroke-width:2}
.ex .on > :not(text){fill:var(--c)}
.ex .on text{fill:var(--surface)}
.ex .c,.ex .tc{fill:var(--c)}
.ex .k{fill:var(--ink)}
.ex .t3{fill:var(--text3)}
.ex .tr{fill:var(--line-strong)}
.ex .ln{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ex .lk{fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ex .lk3{fill:none;stroke:var(--ink);stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
.ex .sl{fill:none;stroke:var(--surface);stroke-width:2.5;stroke-linecap:round}
.ex .cur{fill:var(--ink);stroke:var(--surface);stroke-width:1.5;stroke-linejoin:round}
.ex .dsh{stroke-dasharray:4 3}
.ex .fa{stroke-opacity:.4;stroke-width:2.5}
.ex .gh{opacity:.42}
.ex .gh2{opacity:.22}

/* Area dot fields (svg.df) */
.df{display:block;width:auto;max-width:100%;height:100%}
.df circle{fill:var(--c)}
.df .ring{fill:none;stroke:var(--c);stroke-width:1.5}