/*
 * The length timeline: its chart, axes, dots and hover card.
 *
 * The sheet, heading row, view switcher and the card's base material are
 * shared with the map and live in viz.css, which loads before this file.
 * The topic palette the dots are drawn from lives in variables.css.
 */

/* Timeline chart */

.viz-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.viz-year-label {
    font-family: var(--font-sans);
    font-size: 11px;
    fill: var(--color-ink-muted);
}

.viz-axis-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    fill: var(--color-ink-muted);
}

.viz-axis-title {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    fill: var(--color-ink-muted);
}

.viz-grid { stroke: var(--color-border); stroke-width: 1; }
.viz-quiet-band { fill: var(--color-ink); opacity: 0.035; }
.viz-year-label.quiet { opacity: 0.55; }

/* The horizontal rules behind the plot sit further back than the year
   dividers, which the reader is meant to be able to count. */
.viz-yrule { stroke: var(--color-border); stroke-opacity: 0.5; }

circle.viz-dot { cursor: pointer; }
circle.viz-dot:hover { stroke: var(--color-ink); stroke-width: 1.5; }

/* Keyboard focus needs a visible ring on the dot itself; the default UA
   outline lands on the anchor's bounding box, which reads oddly on a
   circle. */
.viz-dot-link { outline: none; }

.viz-dot-link:focus-visible circle.viz-dot {
    stroke: var(--color-primary);
    stroke-width: 2.5;
}

/* The timeline's own card type. The card material is in viz.css. */
.viz-tip .viz-tip-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--color-primary-dark);
    margin: 0 0 0.2rem;
}

.viz-tip .viz-tip-sub {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    margin: 0;
}

.viz-tip .viz-tip-preview {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

/* The narrow-screen message the chart is replaced by. */
.viz-too-narrow {
    font-family: var(--font-serif);
    color: var(--color-ink-muted);
    margin: var(--space-md) 0 0;
}

.viz-too-narrow[hidden] { display: none; }

/* 900px is TOO_NARROW in js/timeline.js: below it the chart is not drawn at
   all and the message above stands in its place. A vertical orientation for
   small screens is deferred, not decided.

   The pill rule that used to live here -- a media query hiding
   .viz-switch-timeline at the same width -- has moved to VIEW_MIN_WIDTH in
   js/corpus/availability.js, which withdraws the pill for any view that
   cannot run rather than only for this one. It is also what stops the module
   being fetched at all on a narrow screen, which a media query could never
   do. The two numbers must agree: refusing to draw and refusing to be entered
   are separate decisions, but they are decided at the same width. */