/* "Treatment over time" chart on case pages (case_timeline/static/case-timeline.js).
   Colours come from site-tokens.css, so light, dark and reader themes follow automatically. */

.citator-total-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--zl-border);
    text-underline-offset: 3px;
}
.citator-total-link:hover { text-decoration-color: currentColor; }

.zl-tl-summary {
    margin: 0 0 .9rem;
    line-height: 1.55;
}

.zl-tl {
    position: relative;
    min-height: 300px;
}
.zl-tl.is-ready {
    min-height: 0;
}
.zl-tl[hidden] {
    display: none;
}

.zl-tl-skeleton {
    height: 300px;
    border-radius: var(--zl-radius, 6px);
    background: linear-gradient(90deg, var(--zl-soft) 0%, color-mix(in srgb, var(--zl-soft) 55%, var(--zl-surface)) 50%, var(--zl-soft) 100%);
    background-size: 200% 100%;
    animation: zl-tl-shimmer 1.6s ease-in-out infinite;
}
@keyframes zl-tl-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* Legend / filters */
.zl-tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
}
.zl-tl-chip {
    --chip: var(--zl-neutral);
    --chip-soft: var(--zl-neutral-soft);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--chip) 30%, transparent);
    background: var(--chip-soft);
    color: var(--chip);
    font: 600 .78rem/1.4 var(--zl-font, inherit);
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}
.zl-tl-chip:hover { filter: brightness(.96); }
.zl-tl-chip:focus-visible { outline: 2px solid var(--zl-accent); outline-offset: 2px; }
.zl-tl-chip-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--chip);
}
.zl-tl-chip-n { font-weight: 500; opacity: .85; }
.zl-tl-chip[aria-pressed="false"] {
    background: transparent;
    color: var(--zl-muted);
    border-color: var(--zl-border);
    opacity: .75;
}
.zl-tl-chip[aria-pressed="false"] .zl-tl-chip-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--zl-muted);
}
.zl-tl-chip.g-none .zl-tl-chip-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--chip); }

.g-positive { --chip: var(--zl-positive); --chip-soft: var(--zl-positive-soft); color: var(--zl-positive); }
.g-neutral { --chip: var(--zl-neutral); --chip-soft: var(--zl-neutral-soft); color: var(--zl-neutral); }
.g-caution { --chip: var(--zl-caution); --chip-soft: var(--zl-caution-soft); color: var(--zl-caution); }
.g-negative { --chip: var(--zl-negative); --chip-soft: var(--zl-negative-soft); color: var(--zl-negative); }
.g-none { --chip: var(--zl-neutral); --chip-soft: transparent; color: var(--zl-neutral); }

.zl-tl-chip.is-empty[aria-pressed="true"] { opacity: .55; }

/* "Most often cited for" (case_cited_for/; static list, toggles once the script binds it) */
.zl-tl-topics { margin: 0 0 1rem; }
.zl-tl-topics-title {
    margin: 0 0 .4rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zl-muted);
}
.zl-tl-topic-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius, 6px);
    overflow: hidden;
}
.zl-tl-topic {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label meta" "bar bar";
    gap: .3rem .75rem;
    padding: .55rem .75rem;
    border-top: 1px solid var(--zl-border);
    background: var(--zl-surface);
}
.zl-tl-topic:first-child { border-top: 0; }
.zl-tl-topic-label { grid-area: label; line-height: 1.4; }
.zl-tl-topic-meta {
    grid-area: meta;
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .85rem;
    color: var(--zl-muted);
    white-space: nowrap;
}
.zl-tl-topic-tag {
    padding: 0 .4rem;
    border: 1px solid var(--zl-border);
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.5;
}
.zl-tl-topic-bar {
    grid-area: bar;
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--zl-soft);
}
.zl-tl-topic-bar > span { display: block; height: 100%; background: var(--chip); }
.zl-tl-topic-bar > .g-none { background: var(--zl-border); }

.zl-tl-topics.is-interactive .zl-tl-topic { cursor: pointer; }
.zl-tl-topics.is-interactive .zl-tl-topic:hover { background: var(--zl-soft); }
.zl-tl-topic:focus-visible { outline: 2px solid var(--zl-accent); outline-offset: -2px; }
.zl-tl-topics.has-active .zl-tl-topic:not(.is-active) .zl-tl-topic-label { color: var(--zl-muted); }
.zl-tl-topic.is-active {
    background: var(--zl-accent-soft);
    box-shadow: inset 3px 0 0 var(--zl-accent);
}
.zl-tl-topic.is-active .zl-tl-topic-label { font-weight: 600; }

@media (max-width: 576px) {
    .zl-tl-topic { grid-template-columns: 1fr; grid-template-areas: "label" "meta" "bar"; }
}

/* Plot */
.zl-tl-plot {
    position: relative;
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius, 6px);
    background: var(--zl-surface);
    overflow: hidden;
    touch-action: manipulation;
}
.zl-tl-plot:focus { outline: none; }
.zl-tl-plot:focus-visible { box-shadow: 0 0 0 2px var(--zl-accent); }
.zl-tl-svg {
    display: block;
    font-family: var(--zl-font, inherit);
    user-select: none;
}

.zl-tl-band { fill: var(--zl-surface); }
.zl-tl-band.is-alt { fill: var(--zl-soft); fill-opacity: .55; }
.zl-tl-band-label {
    fill: var(--zl-ink);
    font-size: 12px;
    font-weight: 600;
}
.zl-tl-band-label.is-empty { fill: var(--zl-muted); font-weight: 500; }
.zl-tl-band-count { fill: var(--zl-muted); font-size: 11px; }

.zl-tl-grid line {
    stroke: var(--zl-border);
    stroke-opacity: .7;
    shape-rendering: crispEdges;
}
.zl-tl-axis { color: var(--zl-muted); }
.zl-tl-axis text { font-size: 11px; fill: var(--zl-muted); }
.zl-tl-axis .domain { stroke: var(--zl-border); }
.zl-tl-axis .tick line { stroke: var(--zl-border); }

.zl-tl-anchor line {
    stroke: var(--zl-accent);
    stroke-width: 1.25;
    stroke-dasharray: 3 3;
}
.zl-tl-anchor text {
    fill: var(--zl-accent);
    font-size: 11px;
    font-weight: 600;
}
.zl-tl-anchor-mark {
    fill: var(--zl-accent);
    stroke: var(--zl-surface);
    stroke-width: 1.5;
}

.zl-tl-dot {
    fill: currentColor;
    fill-opacity: .82;
    stroke: var(--zl-surface);
    stroke-width: 1;
    transition: opacity .2s ease;
}
.zl-tl-dot.is-hollow {
    fill: var(--zl-surface);
    fill-opacity: 1;
    stroke: currentColor;
    stroke-width: 1.4;
}
.zl-tl-dot.is-off {
    opacity: .07;
}
.zl-tl-plot.has-selection .zl-tl-dot:not(.is-off) {
    opacity: .55;
}
.zl-tl-plot.has-selection .zl-tl-dot.is-selected {
    opacity: 1;
}
.zl-tl-ring {
    fill: none;
    stroke: var(--zl-ink);
    stroke-width: 2;
    pointer-events: none;
}

/* Hover card (desktop) and docked card (touch / narrow) */
.zl-tl-tip,
.zl-tl-dock {
    background: var(--zl-surface);
    color: var(--zl-ink);
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius, 6px);
    font-size: .82rem;
    line-height: 1.45;
}
.zl-tl-tip {
    position: absolute;
    z-index: 2;
    width: max-content;
    max-width: min(320px, 80%);
    padding: .55rem .7rem;
    box-shadow: var(--zl-overlay-shadow);
    pointer-events: none;
}
.zl-tl-tip.is-pinned { pointer-events: auto; }
.zl-tl-tip[hidden],
.zl-tl-dock[hidden] { display: none; }
.zl-tl-dock {
    position: relative;
    margin-top: .5rem;
    padding: .65rem 2.2rem .7rem .8rem;
}
.zl-tl-dock-close {
    position: absolute;
    top: .25rem;
    right: .35rem;
    border: 0;
    background: none;
    color: var(--zl-muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: .25rem .4rem;
    cursor: pointer;
}
.zl-tl-card-name {
    font-weight: 600;
    margin-bottom: .1rem;
}
.zl-tl-card-meta { color: var(--zl-muted); }
.zl-tl-card-meta-lead { color: var(--zl-ink); font-weight: 600; }
.zl-tl-card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin-top: .35rem;
}
.zl-tl-badge {
    display: inline-block;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--chip-soft);
    color: var(--chip);
    font-weight: 600;
    font-size: .75rem;
}
.zl-tl-badge.g-none { background: var(--zl-neutral-soft); }
.zl-tl-muted { color: var(--zl-muted); font-size: .78rem; }
.zl-tl-card-hint {
    margin-top: .35rem;
    color: var(--zl-muted);
    font-size: .75rem;
}
.zl-tl-card-cta {
    margin-top: .45rem;
    font-size: .8rem;
}
.zl-tl-card-cta .btn { margin-left: .25rem; }
.zl-tl-open { margin-top: .5rem; }

.zl-tl-foot {
    margin: .5rem 0 0;
    color: var(--zl-muted);
    font-size: .78rem;
}

.zl-tl-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .75rem;
    padding: .65rem .8rem;
    border-radius: var(--zl-radius, 6px);
    background: var(--zl-accent-soft);
    font-size: .85rem;
}
.zl-tl-cta-actions { display: flex; gap: .4rem; }

@media (prefers-reduced-motion: reduce) {
    .zl-tl-skeleton { animation: none; }
    .zl-tl-dot, .zl-tl-chip { transition: none; }
}