/* Kelsey Evidence Graph. Scoped to #kelsey-graph. No dependencies. Light by default; data-tone="dark" for the navy band. */
#kelsey-graph{
  --kg-bg:#FFFFFF;--kg-fg:#0A0A0A;--kg-muted:#3D4451;--kg-faint:#6B7280;
  --kg-card:#FFFFFF;--kg-surface:#F4F6F9;--kg-lane:#F8F9FB;--kg-hair:#E4E7EC;--kg-line:#D3D8E0;--kg-grid:#E9ECF1;
  --kg-band:#C3CAD5;--kg-track:#E4E7EC;--kg-rail:#EEF1F5;
  --kg-blue:#0038FF;--kg-blue-soft:rgba(0,56,255,.08);--kg-on-blue:#FFFFFF;
  --kg-orange:#FF5A1F;--kg-on-orange:#0A0A0A;--kg-orange-soft:rgba(255,90,31,.12);
  --kg-shadow-1:0 1px 2px rgba(10,15,26,.06),0 4px 12px rgba(10,15,26,.06);
  --kg-shadow-2:0 2px 4px rgba(10,15,26,.06),0 12px 32px rgba(10,15,26,.10),0 32px 64px -16px rgba(10,15,26,.14);
  --kg-sans:'Geist',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --kg-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  position:relative;display:block;width:100%;box-sizing:border-box;color:var(--kg-fg);
  font-family:var(--kg-sans);font-size:15px;line-height:1.45;text-align:left;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;
}
#kelsey-graph[data-tone="dark"]{
  --kg-bg:#0B1A2E;--kg-fg:#F5F7FA;--kg-muted:#B4BCC8;--kg-faint:#8F9BAD;
  --kg-card:#12233B;--kg-surface:#172A44;--kg-lane:rgba(255,255,255,.028);--kg-hair:rgba(255,255,255,.09);--kg-line:rgba(255,255,255,.16);--kg-grid:rgba(255,255,255,.06);
  --kg-band:#3E5579;--kg-track:rgba(255,255,255,.14);--kg-rail:rgba(255,255,255,.06);
  --kg-blue:#7A93FF;--kg-blue-soft:rgba(122,147,255,.14);--kg-on-blue:#0B1A2E;
  --kg-shadow-1:0 1px 2px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.22);
  --kg-shadow-2:0 2px 4px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.36),0 32px 64px -16px rgba(0,0,0,.50);
}
#kelsey-graph *,#kelsey-graph *::before,#kelsey-graph *::after{box-sizing:border-box}
#kelsey-graph button{font:inherit;color:inherit}
#kelsey-graph .kg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Readout */
#kelsey-graph .kg-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
#kelsey-graph .kg-tile{background:var(--kg-card);border:1px solid var(--kg-hair);border-radius:6px;box-shadow:var(--kg-shadow-1);padding:16px 20px 16px;min-width:0}
#kelsey-graph .kg-k{font:500 11px/1.3 var(--kg-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--kg-muted)}
#kelsey-graph .kg-v{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:600 44px/1.05 var(--kg-sans);letter-spacing:-.035em;margin:10px 0 6px;min-height:46px;white-space:nowrap}
#kelsey-graph .kg-v small{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--kg-muted)}
#kelsey-graph .kg-s{font:500 12px/1.35 var(--kg-mono);color:var(--kg-muted)}
#kelsey-graph .kg-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:4px;font:600 11.5px/1 var(--kg-mono);letter-spacing:.04em;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
#kelsey-graph .kg-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
#kelsey-graph .kg-chip-no{background:var(--kg-surface);color:var(--kg-muted);box-shadow:inset 0 0 0 1px var(--kg-hair)}
#kelsey-graph .kg-chip-yes{background:var(--kg-orange);color:var(--kg-on-orange)}
#kelsey-graph .kg-chip-yes::before{background:var(--kg-on-orange)}
#kelsey-graph .kg-bump{animation:kg-bump .5s cubic-bezier(.2,.8,.2,1)}
@keyframes kg-bump{0%{transform:translateY(5px);opacity:.35}100%{transform:none;opacity:1}}

/* Toolbar */
#kelsey-graph .kg-bar{display:flex;align-items:center;gap:14px;margin:0 0 12px;min-height:40px}
#kelsey-graph .kg-play{flex:none;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px 0 15px;border:0;border-radius:6px;background:var(--kg-blue);color:var(--kg-on-blue);font:600 14px/1 var(--kg-sans);letter-spacing:-.005em;cursor:pointer;box-shadow:var(--kg-shadow-1);transition:transform .15s ease,box-shadow .2s ease,filter .2s}
#kelsey-graph .kg-play:hover{box-shadow:var(--kg-shadow-2);transform:translateY(-1px);filter:brightness(1.06)}
#kelsey-graph .kg-play:active{transform:none}
#kelsey-graph .kg-play svg{width:14px;height:14px;fill:currentColor;flex:none}
#kelsey-graph .kg-hint{font:500 12px/1.4 var(--kg-mono);color:var(--kg-muted);margin:0}
#kelsey-graph .kg-drug{margin-left:auto;font:500 12px/1.4 var(--kg-mono);color:var(--kg-muted);text-align:right}
#kelsey-graph .kg-drug b{font:600 13px var(--kg-sans);color:var(--kg-fg);letter-spacing:-.01em}

/* Stage */
#kelsey-graph .kg-stage{position:relative;background:var(--kg-card);border:1px solid var(--kg-hair);border-radius:6px;box-shadow:var(--kg-shadow-1);overflow:hidden}
#kelsey-graph .kg-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#kelsey-graph .kg-canvas{position:relative;user-select:none;-webkit-user-select:none}
#kelsey-graph .kg-lane{position:absolute;left:0;right:0}
#kelsey-graph .kg-lane.kg-alt{background:var(--kg-lane)}
#kelsey-graph .kg-lane-name{position:absolute;z-index:2;left:20px;font:600 13.5px/1.2 var(--kg-sans);letter-spacing:-.01em;color:var(--kg-fg)}
#kelsey-graph .kg-lane-name span{display:block;margin-top:3px;font:500 11px/1.2 var(--kg-mono);color:var(--kg-faint);letter-spacing:0}
#kelsey-graph .kg-before{position:absolute;top:0;bottom:0;border-right:1px dashed var(--kg-line)}
#kelsey-graph .kg-before-cap{position:absolute;font:600 11px/1 var(--kg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--kg-faint)}
#kelsey-graph svg.kg-under,#kelsey-graph svg.kg-over{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#kelsey-graph svg.kg-over{z-index:1}
#kelsey-graph .kg-grid{stroke:var(--kg-grid);stroke-width:1}
#kelsey-graph .kg-track{fill:var(--kg-track)}
#kelsey-graph .kg-rail{fill:var(--kg-rail)}
#kelsey-graph .kg-band-pre{fill:var(--kg-band)}
#kelsey-graph .kg-band-post{fill:var(--kg-orange)}
#kelsey-graph .kg-warn-line{stroke:var(--kg-orange);stroke-width:2}
#kelsey-graph .kg-warn{transition:opacity .35s ease}
#kelsey-graph .kg-flag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:4px;background:var(--kg-orange);color:var(--kg-on-orange);font:600 11.5px/1 var(--kg-mono);letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 6px rgba(255,90,31,.28);transition:opacity .35s ease,transform .35s ease}
#kelsey-graph .kg-flag b{font:700 12.5px/1 var(--kg-sans);letter-spacing:-.01em}
#kelsey-graph .kg-flag.kg-off{opacity:0;transform:translateY(-4px)}
#kelsey-graph .kg-cursor{stroke:var(--kg-blue);stroke-width:1.5;transition:opacity .2s}
#kelsey-graph .kg-axis-line{stroke:var(--kg-line);stroke-width:1}
#kelsey-graph .kg-prog{fill:var(--kg-blue)}
#kelsey-graph .kg-tick{stroke:var(--kg-line);stroke-width:1}
#kelsey-graph .kg-tick-q{stroke:var(--kg-line);stroke-width:1;opacity:.7}
#kelsey-graph .kg-year{font:500 12px var(--kg-mono);fill:var(--kg-muted)}
#kelsey-graph .kg-year-b{font:500 11.5px var(--kg-mono);fill:var(--kg-faint)}

/* Edges: hidden until a card is hovered, focused or selected */
#kelsey-graph .kg-edge{fill:none;stroke:var(--kg-blue);stroke-width:1.75;opacity:0;stroke-dasharray:1 1;stroke-dashoffset:1;transition:opacity .2s ease,stroke-dashoffset 0s linear .2s}
#kelsey-graph .kg-edge.kg-hot{opacity:1;stroke-dashoffset:0;transition:opacity .15s ease,stroke-dashoffset .45s cubic-bezier(.3,.7,.2,1)}
#kelsey-graph .kg-arrow{fill:var(--kg-blue)}

/* Cards */
#kelsey-graph .kg-card{position:absolute;z-index:2;display:flex;align-items:flex-start;gap:9px;height:46px;padding:7px 12px 0 10px;margin:0;border:1px solid var(--kg-hair);border-radius:6px;background:var(--kg-card);box-shadow:var(--kg-shadow-1);text-align:left;cursor:pointer;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease,visibility 0s linear .45s}
#kelsey-graph .kg-card.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease,visibility 0s}
#kelsey-graph .kg-card.kg-flip{flex-direction:row-reverse;padding:7px 10px 0 12px;text-align:right}
#kelsey-graph .kg-card .kg-m{flex:none;width:10px;height:10px;margin-top:4px;border:2px solid var(--kg-fg);border-radius:2px;background:transparent}
#kelsey-graph .kg-card.kg-ev .kg-m{background:var(--kg-fg)}
#kelsey-graph .kg-card.kg-warnnode .kg-m{background:var(--kg-orange);border-color:var(--kg-orange)}
#kelsey-graph .kg-card .kg-t{display:block;font:600 14px/18px var(--kg-sans);letter-spacing:-.012em;color:var(--kg-fg)}
#kelsey-graph .kg-card .kg-d{display:block;font:500 11.5px/15px var(--kg-mono);color:var(--kg-muted);margin-top:1px}
#kelsey-graph .kg-card.kg-warnnode{border-color:rgba(255,90,31,.55)}
#kelsey-graph .kg-card.on.kg-lift,#kelsey-graph .kg-card.on:hover{transform:translateY(-2px);box-shadow:var(--kg-shadow-2);z-index:4;border-color:var(--kg-line)}
#kelsey-graph .kg-card.on.kg-sel{box-shadow:0 0 0 2px var(--kg-blue),var(--kg-shadow-2);border-color:transparent;z-index:4}
#kelsey-graph .kg-card:focus{outline:none}
#kelsey-graph .kg-card:focus-visible{box-shadow:0 0 0 2px var(--kg-bg),0 0 0 4px var(--kg-blue),var(--kg-shadow-2);z-index:5}
#kelsey-graph .kg-card.on.kg-dim{opacity:.35}
#kelsey-graph .kg-canvas.kg-dimming .kg-band,#kelsey-graph .kg-canvas.kg-dimming .kg-warn{opacity:.55}

/* Scrubber (a native range over the time axis) */
#kelsey-graph .kg-range{position:absolute;z-index:3;height:32px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
#kelsey-graph .kg-range::-webkit-slider-runnable-track{height:32px;background:transparent}
#kelsey-graph .kg-range::-moz-range-track{height:32px;background:transparent}
#kelsey-graph .kg-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:7px;border-radius:50%;background:var(--kg-card);border:2px solid var(--kg-blue);box-shadow:0 1px 2px rgba(10,15,26,.12),0 3px 10px rgba(10,15,26,.16);transition:transform .15s ease}
#kelsey-graph .kg-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--kg-card);border:2px solid var(--kg-blue);box-shadow:0 1px 2px rgba(10,15,26,.12),0 3px 10px rgba(10,15,26,.16)}
#kelsey-graph .kg-range:hover::-webkit-slider-thumb,#kelsey-graph .kg-range:active::-webkit-slider-thumb{transform:scale(1.15)}
#kelsey-graph .kg-range:focus{outline:none}
#kelsey-graph .kg-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--kg-card),0 0 0 5px var(--kg-blue)}
#kelsey-graph .kg-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--kg-card),0 0 0 5px var(--kg-blue)}

/* Panel: an overlay card; the graph keeps its size */
#kelsey-graph .kg-panel{position:absolute;z-index:10;top:12px;right:12px;max-height:calc(100% - 24px);width:min(384px,calc(100% - 24px));display:flex;flex-direction:column;background:var(--kg-card);border:1px solid var(--kg-hair);border-radius:6px;box-shadow:var(--kg-shadow-2);
  transform:none;opacity:1;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility 0s}
#kelsey-graph .kg-panel.kg-l{right:auto;left:12px}
#kelsey-graph .kg-panel[hidden]{display:flex;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(28px);transition:transform .25s ease,opacity .2s ease,visibility 0s linear .25s}
#kelsey-graph .kg-panel.kg-l[hidden]{transform:translateX(-28px)}
#kelsey-graph .kg-pbody{overflow:auto;padding:20px 22px 22px;flex:1;min-height:0}
#kelsey-graph .kg-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--kg-hair);border-radius:6px;background:var(--kg-card);color:var(--kg-muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
#kelsey-graph .kg-close:hover{color:var(--kg-blue);border-color:var(--kg-blue);background:var(--kg-blue-soft)}
#kelsey-graph .kg-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
#kelsey-graph .kg-type{display:flex;align-items:center;gap:8px;font:600 11px/1.2 var(--kg-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--kg-muted);margin:4px 44px 10px 0}
#kelsey-graph .kg-type .kg-m{width:10px;height:10px;border:2px solid var(--kg-fg);border-radius:2px}
#kelsey-graph .kg-type .kg-m.kg-ev{background:var(--kg-fg)}
#kelsey-graph .kg-type .kg-m.kg-warnm{background:var(--kg-orange);border-color:var(--kg-orange)}
#kelsey-graph .kg-title{font:700 20px/1.22 var(--kg-sans);letter-spacing:-.025em;margin:0 0 12px;outline:none;text-wrap:balance}
#kelsey-graph .kg-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px}
#kelsey-graph .kg-date{font:600 13px/1 var(--kg-mono);color:var(--kg-fg)}
#kelsey-graph .kg-dt{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--kg-blue-soft);color:var(--kg-blue);font:600 11px/1 var(--kg-mono);letter-spacing:.06em;text-transform:uppercase}
#kelsey-graph .kg-dnote{font:500 12px/1.45 var(--kg-mono);color:var(--kg-muted);margin:0 0 4px}
#kelsey-graph .kg-rule{height:1px;background:var(--kg-hair);margin:14px 0}
#kelsey-graph .kg-sum{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--kg-fg)}
#kelsey-graph .kg-quote{position:relative;margin:0 0 16px;padding:12px 14px 12px 16px;border-left:3px solid var(--kg-fg);border-radius:0 4px 4px 0;background:var(--kg-surface);font-size:14.5px;line-height:1.55;color:var(--kg-fg)}
#kelsey-graph .kg-src{font:500 12px/1.5 var(--kg-mono);color:var(--kg-muted);margin:0 0 16px;overflow-wrap:anywhere}
#kelsey-graph .kg-src b{display:block;font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:10.5px;color:var(--kg-faint);margin-bottom:2px}
#kelsey-graph .kg-open{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:6px;background:var(--kg-blue);color:var(--kg-on-blue);font:600 14px/1 var(--kg-sans);text-decoration:none;box-shadow:var(--kg-shadow-1);transition:box-shadow .2s,transform .15s,filter .2s}
#kelsey-graph .kg-open:hover{box-shadow:var(--kg-shadow-2);transform:translateY(-1px);filter:brightness(1.06)}
#kelsey-graph .kg-open svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
#kelsey-graph .kg-play:focus-visible,#kelsey-graph .kg-close:focus-visible,#kelsey-graph .kg-open:focus-visible{outline:2px solid var(--kg-blue);outline-offset:3px}

/* Caption */
#kelsey-graph .kg-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:14px 2px 0;font:500 12px/1.5 var(--kg-mono);color:var(--kg-muted)}
#kelsey-graph .kg-key{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#kelsey-graph .kg-key i{display:inline-block;width:10px;height:10px;border:2px solid var(--kg-fg);border-radius:2px}
#kelsey-graph .kg-key i.kg-f{background:var(--kg-fg)}
#kelsey-graph .kg-key i.kg-o{background:var(--kg-orange);border-color:var(--kg-orange)}
#kelsey-graph .kg-note-txt{flex-basis:100%;margin:0}

/* Phones */
#kelsey-graph.kg-narrow .kg-readout{grid-template-columns:1fr;gap:8px}
#kelsey-graph.kg-narrow .kg-tile{padding:12px 14px 12px}
#kelsey-graph.kg-narrow .kg-v{font-size:30px;min-height:32px;margin:6px 0 4px;gap:10px;flex-wrap:nowrap}
#kelsey-graph.kg-narrow .kg-v small{font-size:17px}
#kelsey-graph.kg-narrow .kg-chip{height:22px;font-size:10.5px;padding:0 8px}
#kelsey-graph.kg-narrow .kg-drug{display:none}
#kelsey-graph.kg-narrow .kg-hint{font-size:11.5px}
#kelsey-graph.kg-narrow .kg-lane-name{left:14px;display:flex;align-items:baseline;gap:8px;font-size:12.5px}
#kelsey-graph.kg-narrow .kg-lane-name span{display:inline;margin:0}
#kelsey-graph.kg-narrow .kg-panel{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:78vh;border-radius:10px 10px 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
#kelsey-graph.kg-narrow .kg-panel[hidden]{transform:translateY(32px)}
#kelsey-graph.kg-narrow .kg-panel::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--kg-line)}
#kelsey-graph.kg-narrow .kg-pbody{padding:22px 18px 22px}

@media (prefers-reduced-motion:reduce){
  #kelsey-graph *,#kelsey-graph *::before,#kelsey-graph *::after{transition:none!important;animation:none!important}
  #kelsey-graph .kg-play{display:none}
}
