/*
 * The map: its canvas box, its side panel, and the card grammar both the
 * panel and the floating hover card are set in.
 *
 * The sheet, heading row, view switcher and the card's base material are
 * shared with the timeline and live in viz.css, which loads before this
 * file. The topic palette a piece is coloured from lives in variables.css.
 *
 * The card type rules below are deliberately unscoped, so one card grammar
 * serves both containers: the floating tip on a narrow screen and the
 * standing panel on a wide one. An earlier revision gave the tip a parallel
 * set of rules, which meant the same piece was dressed one way under the
 * pointer and another way once selected.
 */

.viz-map {
    position: relative;
    height: min(72vh, 760px);
    border-radius: 12px;
    overflow: hidden;
}

.viz-map canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}

.viz-map canvas.dragging { cursor: grabbing; }

/* On the map the card is a child of the map box and is clamped to it, so it
   positions against that box rather than the window as it does on the
   timeline. Same material, different frame of reference. */
.viz-map .viz-tip { position: absolute; }

.viz-swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }

/* The side panel: the view's only readout. Hover writes into it, selecting
   holds it there.

   Full height of the space, not sized to its contents. It stands on a wide
   screen whether or not anything is selected, and hover rewrites it
   continuously — a panel that grew and shrank with each card would flicker
   the layout on every pointer move. Fixed height, contents scroll inside. */
.viz-list {
    position: absolute;
    /* Positioned against the sheet, not the map box, so it can rise past the
       standfirst. The top clears the heading row — the view switch shares
       that line and must stay uncovered — and the insets below match the
       sheet's own padding, so panel and map sit flush. */
    top: calc(var(--sheet-pad) + 3.9rem);
    right: var(--sheet-pad);
    bottom: var(--sheet-pad);
    width: 18rem;
    overflow-y: auto;
    /* The sheet's own glass, not a heavier variant of it. The panel reads as a
       raised part of the same surface rather than as a card dropped on top,
       so it takes the shared opacity and blur tokens. It composites over the
       sheet, so the result is denser than the sheet alone — which is what
       keeps the text legible over the map. */
    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: 12px;
    padding: 0.85rem 0.95rem;
    font-family: var(--font-sans);
    color: var(--color-ink);
}

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

/* The platform scrollbar is a heavy grey slab against the glass. Thin it and
   tint it to the ink so the panel keeps its material. */
.viz-list { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.viz-list::-webkit-scrollbar { width: 8px; }
.viz-list::-webkit-scrollbar-track { background: transparent; }
.viz-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
}

/* One title treatment for every card the view draws — hovered piece, hovered
   tag, selected piece, selected tag. The serif because it is the piece's own
   voice; the primary because a title is the one thing on the card that is
   either a link or about to become one. */
.viz-list h2,
.viz-map .viz-tip h2 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--color-primary-dark);
    margin: 0;
}

.viz-list-count {
    font-size: 0.72rem;
    color: var(--color-ink-muted);
    margin: 0.15rem 0 0.6rem;
}

.viz-list-hint {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-ink-muted);
    margin: 0;
}

/* A selected piece's card in the panel. */
.viz-list-link { color: inherit; text-decoration: none; }
.viz-list-link:hover { text-decoration: underline; }

/* No rule above the excerpt. Space separates it from the metadata; a line as
   well was doing the same job twice, and the panel carries no other rules. */
.viz-list-preview {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 0.6rem;
    padding-top: 0.55rem;
}

/* Tags follow the site's own idiom (see .sidebar-tagged .tagged-list): small
   inline oxblood links running as a sentence, not pills. They are buttons
   because they move the map rather than navigate, but they should not look
   like a control the rest of the site does not have. */
.viz-list-chips {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
    margin: 0 0 0.6rem;
}

.viz-chip {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    white-space: nowrap;
    cursor: pointer;
    /* Buttons are inline-block by default and spans are inline, which sat the
       two treatments a fraction apart on the line. Pinning both to the same
       box and baseline keeps the hovered and selected cards identical. */
    display: inline-block;
    vertical-align: baseline;
}

.viz-chip:hover { text-decoration: underline; color: var(--color-primary-hover); }

/* A hovered piece draws the same chips, but as spans: the node under the
   pointer is about to change, so a target that vanishes when the pointer moves
   would be a control that cannot be reached. They look identical to the
   selected card's chips deliberately — hovering and selecting differ in what
   the card can do, not in how it is dressed. */
span.viz-chip { cursor: inherit; }
span.viz-chip:hover { text-decoration: none; color: var(--color-primary); }

.viz-chip-sep { color: var(--color-ink-muted); }

/* The pieces behind a selected tag. These are <button> elements, not links:
   clicking one moves the map's focus onto that piece rather than navigating
   (see js/map/panel.js). The rule therefore has to undo the button user-agent
   styles so the row reads as the plain list it was when it was an anchor. */
.viz-list-item {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    width: 100%;
    padding: 0.35rem 0;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.viz-list-item:hover .t { text-decoration: underline; }
.viz-list-item .t { display: block; font-size: 0.82rem; line-height: 1.3; }
.viz-list-item .d { display: block; font-size: 0.7rem; color: var(--color-ink-muted); }

/* The resting text the panel holds when nothing is hovered or selected. */
.viz-list-resting {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
    margin: 0;
}

/* 900px is PANEL_MIN_WIDTH in js/map/panel.js: below it the script stops
   standing the panel up and stops reserving a gutter for it. The two must
   stay in step. */
@media (max-width: 900px) {
    .viz-list { width: 12rem; font-size: 0.75rem; }
}

@media (max-width: 720px) {
    .viz-map { height: 70vh; }
}