/* Figures for this post: interactive charts and audio traces.
   Series colors were validated for colour-vision deficiency on both themes (dataviz
   validate_palette.js): lanes user/model, events, and the four turn settings as an
   ordinal ramp from most eager (server VAD) to most patient (semantic low). */

:root {
  --user:    #0087a0;
  --model:   #B8740F;
  --ended:   #7a5bc9;
  --heard:   #B8740F;
  --s-server: #9aa1e6;
  --s-high:   #6e78d6;
  --s-auto:   #4750b8;
  --s-low:    #2a2f86;
  --ok-ink:  #2A6B42; --ok-bg:  #D8EBDD;
  --bad-ink: #9E2F25; --bad-bg: #F4DAD6;
  --tbd-bg:  #FFF1B8;
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --user: #009aa8; --model: #c47f1c; --ended: #8a6fdc; --heard: #c47f1c;
    --s-server: #4d57b9; --s-high: #6670cc; --s-auto: #8089dd; --s-low: #a9b0f0;
    --ok-ink: #86D0A1; --ok-bg: #1B3325; --bad-ink: #F0998F; --bad-bg: #3A211E;
    --tbd-bg: #4A3F12;
  }
}
[data-theme="dark"] {
  --user: #009aa8; --model: #c47f1c; --ended: #8a6fdc; --heard: #c47f1c;
  --s-server: #4d57b9; --s-high: #6670cc; --s-auto: #8089dd; --s-low: #a9b0f0;
  --ok-ink: #86D0A1; --ok-bg: #1B3325; --bad-ink: #F0998F; --bad-bg: #3A211E;
  --tbd-bg: #4A3F12;
}


blockquote {
  max-width: var(--measure); margin: 1.3rem auto; padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 2px solid var(--model); font-family: var(--f-display);
  font-size: 1.12rem; font-style: italic; color: var(--ink);
}

/* chart chrome */
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz .gl { stroke: var(--rule); stroke-width: 1; }
.viz .ax { stroke: var(--rule-2); stroke-width: 1; }
.viz .tx { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-3); }
.viz .at { font-family: var(--pico-font-family-sans-serif); font-size: 12px; fill: var(--ink-2); }
.viz .dl { font-family: var(--pico-font-family-sans-serif); font-size: 12px; fill: var(--ink); }
.viz .dl2 { font-family: var(--pico-font-family-sans-serif); font-size: 11.5px; fill: var(--ink-2); }
.viz .hit { fill: transparent; cursor: crosshair; }
.viz .cross { stroke: var(--ink-3); stroke-width: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 0.6rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend i { display: inline-block; flex: none; }
.legend .kl { width: 16px; height: 2px; border-radius: 1px; }
.legend .kd { width: 9px; height: 9px; border-radius: 50%; }
.legend .kr { width: 12px; height: 12px; border-radius: 2px; }

.multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem 1.2rem; }
.multiples h4 { font-family: var(--pico-font-family-sans-serif); font-size: 0.82rem; font-weight: 600; margin: 0.2rem 0 0; display: flex; align-items: center; gap: 0.45rem; }
.multiples h4 i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

figure.chart details { margin-top: 0.8rem; }
figure.chart details summary { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
figure.chart details table { font-size: 0.8rem; margin-top: 0.6rem; }
figure.chart details td, figure.chart details th { padding: 0.35rem 0.6rem; background: transparent; }
figure.chart .dtable { overflow-x: auto; }

#tip {
  position: fixed; pointer-events: none; z-index: 60;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 0.45rem 0.6rem;
  font-size: 0.8rem; min-width: 150px; max-width: 280px;
}
#tip .t { font-family: var(--f-mono); font-size: 0.64rem; color: var(--ink-3); margin-bottom: 0.2rem; }
#tip .r { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0; }
#tip .r b { color: var(--ink); font-weight: 600; }
#tip .r span { color: var(--ink-2); }
#tip .r i { width: 12px; height: 2px; border-radius: 1px; display: inline-block; flex: none; }

/* audio traces */
.trace .tr-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; margin-bottom: 0.3rem; }
.trace .tr-title { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.trace .tr-sub { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--ink-3); }
.trace .lane { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--ink-2); }
.trace .env-u { fill: var(--user); opacity: 0.85; }
.trace .env-m { fill: var(--model); opacity: 0.85; }
.trace .mark { stroke: var(--ink-3); stroke-width: 1; opacity: 0.55; }
.trace .evn { font-family: var(--f-mono); font-size: 10px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.trace .head { stroke: var(--ink); stroke-width: 1.5; }
.trace .tr-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.4rem; margin-top: 0.6rem; }
.trace audio { width: 100%; height: 36px; margin-bottom: 0.5rem; }
.trace ol.ev { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; line-height: 1.45; }
.trace ol.ev li { display: grid; grid-template-columns: 20px 52px minmax(0, 1fr); gap: 0.45rem; padding: 0.3rem 0; border-top: 1px solid var(--rule); margin: 0; }
.trace ol.ev .n { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-family: var(--f-mono); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.trace ol.ev .t { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); padding-top: 1px; }
.trace .said { font-size: 0.86rem; line-height: 1.5; }
.trace .said .who { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0.6rem 0 0.1rem; display: flex; align-items: center; gap: 0.5rem; }
.trace .said .who:first-child { margin-top: 0; }
.trace .said p { margin: 0; }
.trace .chip { font-family: var(--f-mono); font-size: 0.6rem; text-transform: none; letter-spacing: 0.03em; padding: 0.05rem 0.4rem; border-radius: 3px; }
.trace .chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.trace .chip.bad { background: var(--bad-bg); color: var(--bad-ink); }
.trace .take { margin-top: 0.8rem; font-size: 0.86rem; line-height: 1.5; padding: 0.55rem 0.7rem; border-radius: 5px; background: var(--paper); border: 1px solid var(--rule); }

@media (max-width: 720px) { .trace .tr-body { grid-template-columns: minmax(0, 1fr); } }

/* Fill the text column: blog.css caps the standfirst at 60ch and captions at 72ch,
   which wraps them well short of the rule under the header. */
article > header .standfirst { max-width: var(--measure); }
figure figcaption, .note { max-width: var(--measure); }

/* This title is longer than blog.css's headline measure allows at full size, so it wrapped
   into two balanced lines. On desktop, size it to sit on one line. */
@media (min-width: 900px) {
  article > header h1 { font-size: 1.85rem; max-width: none; }
}