/*
 * Shared chrome for the corpus views: the sheet a view sits on, its heading
 * row, the switcher between views, and the base card material.
 *
 * Both /timeline.html and /map.html use these. What is specific to one view
 * lives in timeline.css or map.css, which load after this file. The topic
 * palette the views draw from lives in variables.css — it is a site token
 * set, not a chart-local one.
 *
 * Load order: viz.css before timeline.css and map.css.
 */

/* The corpus views sit in the shared envelope on the same terms as every
   other page (envelope and grid in layout.css) — one width across the site.
   They previously ran at max-width: none, which made the frame change size
   as the reader moved between the four switcher views.

   --viz-columns is the dial for canvas room. Default 1 keeps the sheet in
   the content column, exactly as wide as every other page's sheet — that is
   what the list uses, since a list of titles and dates is read down like any
   other page.

   The timeline and map override it to `1 / -1`, spanning the reserved right
   column as well. They are charts, scanned across rather than read down, and
   the room is worth a deliberate inconsistency with the reading pages. The
   envelope, the desk gutters and the left edge are unchanged, so the pages
   still start where every other page starts; only the sheet's right edge
   runs further. */
.viz-page {
    margin: 0 auto;
}

body.page-timeline,
body.page-map {
    --viz-columns: 1 / -1;
}

/* The :not() is load-bearing. Browse's filter aside is also a direct child of
   .corpus-page and also carries .viz-sheet, because it borrows the frosted
   panel material -- but it is not the sheet that morphs, and it places itself
   in the reserved right column (search.css). Without the exclusion this rule
   matches it too, at equal specificity and from a later stylesheet, so it wins
   and drags the panel into column 1 and the results sheet below it. Any future
   panel that wears .viz-sheet needs the same treatment. */
@media (min-width: 1000px) {
    .viz-page > .viz-sheet,
    .corpus-page > .viz-sheet:not(.search-side) {
        grid-column: var(--viz-columns, 1);
    }
}

.viz-sheet {
    /* Positioning context for anything clamped to the sheet. The map's readout
       panel used to be anchored here; it now stands in the page's right
       column, outside the sheet (see map.css). */
    position: relative;
    background-color: rgba(var(--panel-rgb), var(--panel-opacity));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    backdrop-filter: blur(var(--panel-blur));
    box-shadow: var(--shadow-panel);
    border-radius: 16px;
    /* Same padding as every other sheet (glass.css) — it was --space-lg
       while these pages ran full-bleed and needed the extra canvas. */
    padding: var(--sheet-pad);
}

/* Heading and view switch share a line, the switch pushed to the right edge;
   the standfirst runs underneath across the full width. Placed by grid rather
   than by reordering the markup, so the reading order stays title, blurb,
   navigation. */
.viz-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-bottom: var(--space-md);
}

.viz-head h1 { grid-column: 1; grid-row: 1; }
.viz-head p { grid-column: 1 / -1; grid-row: 2; }

.viz-head h1 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--color-primary-dark);
    margin: 0 0 var(--space-xs);
}

.viz-head p {
    font-family: var(--font-serif);
    color: var(--color-ink-muted);
    margin: 0;
    max-width: var(--reading-width);
}

/* The switcher between the corpus views. It also sits on the browse page,
   where it is the only entry point to either view — there is no header
   nav entry. */
.viz-switch {
    display: flex;
    gap: var(--space-sm);
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.viz-head .viz-switch {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* Narrow screens: the switcher drops to a row of its own under the heading.
   Beside the heading the pills crowd it at tablet width and collide with it
   on a phone. Same 1000px breakpoint the filter panel uses, so the page has
   one place where its layout changes rather than two.

   The pills come before the standfirst, so they stay attached to the title
   they act on. They also wrap, which is what keeps four of them on a 320px
   screen. */
@media (max-width: 999px) {
    .viz-head {
        grid-template-columns: 1fr;
    }

    .viz-head .viz-switch {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        flex-wrap: wrap;
        margin-bottom: var(--space-xs);
    }

    .viz-head p {
        grid-row: 3;
    }
}

.viz-switch a,
.viz-switch span {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    text-decoration: none;
}

/* Matches any element, not just a span: on the combined corpus page all four
   pills are persistent <a> elements and presenter.js moves aria-current
   between them, so no pill is ever a <span>. */
.viz-switch [aria-current] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: rgba(var(--panel-rgb), 1);
}

/* A pill for a view that cannot run at this width is withdrawn outright by
   js/corpus/availability.js. This was a media query in timeline.css, which
   could only ever know about the timeline. */
.viz-switch [hidden] { display: none; }

/* The four views of the corpus page. Exactly one is shown; the rest carry
   `hidden`, which is what keeps them out of the tab order and the
   accessibility tree.

   The !important is deliberate and load-bearing. `hidden` is only a UA-level
   display:none, and search.css and map.css both set `display` on elements
   inside these sections -- .viz-map, .viz-list, .search-filters-content and
   the narrow-screen flex fallback among them. Any of those outranks the
   attribute. Without this guard the failure mode is not a visible mess but an
   invisible view that Tab still walks into. */
.corpus-view[hidden] { display: none !important; }

/* The width animation is on the sheet (js/corpus/morph.js). The wide views
   span the reserved right column as well; the narrow ones sit in the content
   column, exactly as wide as every other page's sheet. */
.corpus-page--wide { --viz-columns: 1 / -1; }

/* The hover and focus card. Both views use this material; the timeline fixes
   it to the window, the map clamps it to the map box (see map.css).

   The card's own type rules are set by each view, on the .viz-tip-* classes
   for the timeline and the .viz-list-* classes for the map. Nothing here may
   set `margin` on a bare `p` — that would outrank those class rules and put
   the card spacing out of step. */
.viz-tip {
    position: fixed;
    pointer-events: none;
    z-index: 20;
    max-width: 22rem;
    background-color: rgba(var(--panel-rgb), 0.97);
    -webkit-backdrop-filter: blur(var(--panel-blur));
    backdrop-filter: blur(var(--panel-blur));
    box-shadow: var(--shadow-panel);
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-ink);
}

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