/* The web that vanished: the address switch, the before / after diff, the 2009 dots. */
.views { display: grid; gap: var(--space-4); }
.views .view { display: grid; gap: 8px; align-content: start; min-width: 0; }
.view-stack { display: grid; gap: var(--space-4); min-width: 0; }
.views:not(.one) .view + .view { border-top: 1px solid var(--soft); padding-top: var(--space-4); }
/* one address at a time (story-geocities.js): both views in the same cell, the other
   invisible, so switching never moves the page */
.views.one .view-stack > .view { grid-area: 1 / 1; }
.views.one .view.off { visibility: hidden; }
.views h4 { margin: 0; font-family: var(--font-mono); font-size: .86rem; font-weight: 500; color: var(--navy); }
.views .sub, .diffview .sub { font-size: .84rem; color: var(--muted); }
.diffview { display: grid; gap: 10px; }
.diffview .seg { justify-self: start; }
.diff .ctx { color: var(--ink-2); }
.diff .ctx::before { content: "  "; }
.diff .len { color: var(--muted); font-style: italic; }
.diff .del .len, .diff .add .len { color: inherit; }
/* Before: the removed lines were simply the page; after: the added lines are */
.diff.show-before .add, .diff.show-after .del { display: none; }
.diff.show-before .del { color: var(--ink); text-decoration: none; background: var(--navy-light); }
.diff.show-before .del::before { content: "  "; }
.diff.show-after .add::before { content: "  "; }
/* a wide transparent stroke makes each dot easy to point at */
.chart svg.scatter .dot { stroke: rgba(255,255,255,0); stroke-width: 14; }
.chart svg.scatter .dot:hover { fill: var(--navy); stroke: rgba(13,34,64,.12); stroke-width: 14; }
.views > .seg { justify-self: start; }
.views.one .view > h4 { display: none; }