/* Figures for post 2 (GPT-Live vs gpt-realtime): 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;
  --s-live:   #c2417f;
  --ack:      #7a5bc9;
  --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; --s-live: #d9588f; --ack: #8a6fdc;
    --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; --s-live: #d9588f; --ack: #8a6fdc;
  --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; }

/* recorded clips: side-by-side pairs and the gallery */
figure.pair { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.1rem 0.9rem; }
figure.pair figcaption { margin-top: 0.6rem; }
.pair-title { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin-bottom: 0.4rem; }
.clip { padding: 0.7rem 0 0.5rem; border-top: 1px solid var(--rule); }
.pair .clip:first-of-type { border-top: none; padding-top: 0.2rem; }
.clip-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; }
.clip .play {
  width: 2.1rem; height: 2.1rem; padding: 0; margin: 0; border-radius: 50%; flex: none;
  border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); cursor: pointer; position: relative;
}
.clip .play::before {
  content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 0.38rem 0 0.38rem 0.62rem; border-color: transparent transparent transparent currentColor;
}
.clip.on .play::before { width: 0.6rem; height: 0.7rem; border: none; left: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.clip.is-live .play { border-color: var(--s-live); color: var(--s-live); }
.clip.is-rt .play { border-color: var(--s-auto); color: var(--s-auto); }
.clip .play:hover { background: var(--paper-3); }
.clip-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; min-width: 0; }
.clip .sys { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.03em; font-weight: 600; }
.clip.is-live .sys { color: var(--s-live); }
.clip.is-rt .sys { color: var(--s-auto); }
.clip .res { font-size: 0.92rem; color: var(--ink); }
.clip .clock { font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-3); white-space: nowrap; }
.clip-svg { display: block; width: 100%; height: auto; margin-top: 0.35rem; overflow: visible; }
.clip .lane { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--ink-3); }
.clip .env-u { fill: var(--user); opacity: 0.85; }
.clip .env-m { fill: var(--model); opacity: 0.85; }
.clip .mark { stroke-width: 1; opacity: 0.6; stroke-dasharray: 2 2; }
.clip .mark-u { stroke: var(--user); }
.clip .mark-m { stroke: var(--model); }
.clip .mk { font-family: var(--pico-font-family-sans-serif); font-size: 11.5px; }
.clip .mk-u { fill: var(--user); }
.clip .mk-m { fill: color-mix(in srgb, var(--model) 80%, var(--ink)); }
.clip .head { stroke: var(--ink); stroke-width: 1.5; }
.clip .hit { fill: transparent; cursor: pointer; }
.clip-lines { margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.45; }
.clip-lines .ln { margin: 0.12rem 0; display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.5rem; }
.clip-lines .ln-who { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.18rem; }
.clip-lines .ln-caller .ln-text { color: var(--ink-2); }
.clip-lines .ln-model .ln-text { color: var(--ink); }
.clip.compact { padding: 0.6rem 0 0.4rem; }
.clip.compact .res { font-size: 0.88rem; }
.clip-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.2rem 1.4rem; align-items: start; }
.clip.compact .clip-svg { margin-top: 0.2rem; }
.clip.compact .clip-lines { font-size: 0.8rem; line-height: 1.35; margin-top: 0.5rem; }
.clip.compact .clip-lines .ln { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.4rem; margin: 0.08rem 0; }
.clip.compact .mk { font-size: 12.5px; }
@media (max-width: 820px) { .clip-body { grid-template-columns: minmax(0, 1fr); } }

#gallery .gal-h { font-size: 1rem; margin: 1.6rem 0 0.2rem; }
#gallery .gal { border-bottom: 1px solid var(--rule); }

details.more { max-width: var(--measure); margin: 1.2rem auto; border-top: 1px solid var(--rule); padding-top: 0.6rem; }
details.more > summary { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
details.more[open] > summary { margin-bottom: 0.8rem; }
details.method { margin-top: 2.2rem; }
details.method p { font-size: 0.92rem; }

@media (max-width: 640px) {
  .clip-lines .ln { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .clip .clock { display: none; }
  figure.pair { padding: 0.8rem 0.7rem; }
}

/* 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; }
}