/* ═══════════════════════════════════════════════
   A volume of the Restricted Section

   A volume is a conflict's history set in the Chronological View's own
   markup, so chronicle.css draws nearly all of it. This sheet adds only
   what a history needs and a case does not:

     .vol-ip, .vol-jw   a volume's two inks, set on <body>
     .masthead-vol      a masthead with a lede and a row of periods,
                        since there is no case page above it
     li.tl-before       background, above where the history starts: a
                        list of its own (ol.tl-pro) inside the rail, its
                        phase and its cards (tl-pre) on a dotted line
     li.tl-start        where the history starts: the first entry, with
                        the two sides' cards beside it, and the mark the
                        solid line runs down from
     p.tl-era           a period's name, over the first phase in it
     p.tl-x-f           an event folded into another card's drawer
     .chip-q            "Disputed", on a card whose facts or meaning
                        the two sides argue about
     .vol-tabs          a volume of more than one war: a tab for each,
                        under the title, each its own page (Volume VI)

   Nothing here names a conflict except the inks, and the next volume
   restates those and nothing else.
   ═══════════════════════════════════════════════ */

/* ── the inks ──
   A case's two inks mean the side that brought it and the side
   answering. Here nobody brought anything, so a history has its own
   pair: an ochre and a violet, chosen to stay apart from each other and
   from the court's sepia for the three common kinds of colour
   blindness, and to read as no flag. Every colour a side needs in the
   chronology is mixed from these by chronicle.css. */
.vol-ip {
  --p: #9a5a12;
  --p-dim: #85531c;
  --p-wash: rgba(154, 90, 18, 0.085);
  --p-edge: rgba(154, 90, 18, 0.4);

  --d: #5b4791;
  --d-dim: #594d82;
  --d-wash: rgba(91, 71, 145, 0.085);
  --d-edge: rgba(91, 71, 145, 0.4);
}

/* Volume VI, Justinian's Wars: a steel blue for the Empire on the left,
   and a rust for whoever it fought on the right, the Goths, the Vandals
   or Persia. Checked as Volume I's were, under simulated protan, deutan
   and tritan vision: the nearest two of the pair and the court's sepia
   stay further apart than Volume I's do (25.9 in CIELAB at worst,
   against 19.8), and the dim shades read on the band as Volume I's do.
   No purple, the emperors' color, which would read as taking a side. */
.vol-jw {
  --p: #2a5a92;
  --p-dim: #3a5680;
  --p-wash: rgba(42, 90, 146, 0.085);
  --p-edge: rgba(42, 90, 146, 0.4);

  --d: #ae4f12;
  --d-dim: #8f4d22;
  --d-wash: rgba(174, 79, 18, 0.085);
  --d-edge: rgba(174, 79, 18, 0.4);
}

/* ── the masthead ──
   The chronology's masthead with what a case page's would have said
   about the case: a lede and a strip of facts. Under them, the periods
   the rail runs through, each a jump to where it starts. */
.masthead-vol { padding: 96px 0 0; border-bottom: 0; }

.masthead-vol .eyebrow { margin-bottom: 20px; }

.masthead-vol .masthead-title {
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  margin-bottom: 34px;
}

.masthead-vol .docket-meta { margin-top: 44px; }

.vol-eras {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 56px;
  border: 1px solid var(--rule);
  border-bottom: 0;
}

.vol-eras a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 14px 13px;
  text-decoration: none;
  background: rgba(23, 20, 15, 0.035);
  box-shadow: inset 0 -1px 0 var(--rule);
  transition: background-color 0.2s;
}

.vol-eras a + a { border-left: 1px solid var(--rule); }

.vol-eras a:hover,
.vol-eras a:focus-visible { background: var(--bg-band); }

.vol-eras a:focus-visible { outline-offset: -4px; }

.vol-era-y {
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--ink);
}

.vol-era-t {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

@media (width <= 900px) {
  .vol-eras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vol-eras a:nth-child(3n + 1) { border-left: 0; }
  .vol-eras a:nth-child(n + 4) { border-top: 1px solid var(--rule); }
}

@media (width <= 620px) {
  .masthead-vol { padding-top: 56px; }
  .masthead-vol .docket-meta { margin-top: 32px; }
  .vol-eras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .vol-eras a:nth-child(n) { border-left: 1px solid var(--rule); border-top: 0; }
  .vol-eras a:nth-child(odd) { border-left: 0; }
  .vol-eras a:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .vol-era-t { font-size: 0.74rem; }
}

/* A row that says how many periods it has (--n, on the row itself) is
   that many across, down to a phone, where it goes two by two. Volume I's
   row says nothing and keeps its six, three and two. */
.vol-eras[style] { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }

@media (620px < width <= 900px) {
  .vol-eras[style] a:nth-child(n) { border-left: 1px solid var(--rule); border-top: 0; }
  .vol-eras[style] a:first-child { border-left: 0; }
}

@media (width <= 620px) {
  .vol-eras[style] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .vol-eras { display: none; }
}

/* ── a volume of several wars ──
   Volume VI is three wars, each on a page of its own, so under the title
   the three stand side by side as the views of a case do. Here they are
   high in the masthead rather than at its foot, with the volume's lede,
   facts and periods still to come, so the bar is a closed box, and the
   war the reader is in keeps its rule along the bottom. The years ride
   in the tag. A war not yet written is a plain box with no link. */
.vol-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -4px 0 38px;
  border-bottom: 1px solid var(--rule);
}

.vol-tabs .view { box-shadow: none; }
.vol-tabs .view[aria-current] { box-shadow: inset 0 2px 0 var(--court); }

.vol-tabs .view-off { color: var(--faint); cursor: default; }
.vol-tabs .view-off:hover { color: var(--faint); background: rgba(23, 20, 15, 0.035); }

@media (width <= 620px) {
  .vol-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 30px; }
  .vol-tabs .view:nth-child(n) { border-left: 1px solid var(--rule); border-top: 0; }
  .vol-tabs .view:first-child { border-left: 0; }
  .vol-tabs .view:nth-child(-n + 2):not([aria-current]) { box-shadow: none; }
  .vol-tabs .view { padding: 11px 6px 10px; }
}

@media print {
  .vol-tabs { display: none; }
}

/* ── the periods, kept to hand ──
   Once the row of periods has gone up under the nav, volume.js puts a
   copy of it, the years alone, just under the nav, so any period
   is one tap away from anywhere down the page. The period passing under
   it is marked. It slides out from behind the nav, and back in when the
   row it copies comes back into view. On a wide screen the bar over the
   rail moves down to sit under it, and a jump lands clear of all three.
   The bar can only stick once the row is gone, so the page is set for
   the strip (vol-jump-on) as soon as the strip is built. */
.vol { --vol-jump: 44px; }

/* A dark band, so it reads as a row of buttons and not as more of the
   nav: the years in the masthead row's own figures, light on ink, with
   a hairline between each. The ink is the court's sepia taken most of
   the way to the page's ink, a step lighter than the ink itself. */
.vol-jump {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 150;
  height: var(--vol-jump);
  background: color-mix(in srgb, var(--court) 45%, var(--ink));
  box-shadow: 0 6px 14px -8px rgba(23, 20, 15, 0.55);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s 0.25s;
}

.vol-jump.is-on {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s;
}

.vol-jump .wrap {
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  height: 100%;
  border-left: 1px solid rgba(239, 233, 220, 0.18);
}

.vol-jump a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(239, 233, 220, 0.18);
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
  font-size: 1.12rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: rgba(239, 233, 220, 0.84);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.vol-jump a:hover,
.vol-jump a:focus-visible { color: var(--paper); background: rgba(239, 233, 220, 0.12); }

.vol-jump a:focus-visible { outline: 2px solid var(--paper); outline-offset: -5px; }

/* The period passing under the bar: a tab pulled out, the page's own
   paper with the year in ink over a rule in the court's. */
.vol-jump a[aria-current] { color: var(--ink); background: var(--paper); }

.vol-jump a[aria-current]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--court);
}

@media (width <= 620px) {
  .vol-jump a { font-size: 0.98rem; }
}

/* The period's name is for a screen reader; the year is enough to see. */
.vol-jump-t {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (width > 900px) {
  .vol-jump-on .tl-key { top: calc(44px + var(--vol-jump)); }
  .vol-jump-on .tl-phase { scroll-margin-top: calc(92px + var(--vol-jump)); }
  .vol-jump-on .tl-ev { scroll-margin-top: calc(112px + var(--vol-jump)); }
}

@media (width <= 900px) {
  .vol-jump { top: 40px; }
  .vol-jump-on .tl-ev { scroll-margin-top: calc(84px + var(--vol-jump)); }
}

@media (prefers-reduced-motion: reduce) {
  .vol-jump,
  .vol-jump.is-on { transition: none; }
}

@media print {
  .vol-jump { display: none; }
}

/* A period's name, over the first phase in it: the plate's mono in the
   court's ink, the years and then the name. */
.tl-era {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tl-c-ink);
}

.tl-era span { color: var(--muted); }

.tl-era span::before { content: '\00b7'; margin: 0 0.7em; color: var(--faint); }

/* Arrived at from the row of periods, a phase lands clear of the nav
   and the bar, as an entry does. */
.tl-phase { scroll-margin-top: 92px; }

/* ── before the start ──
   The background sits above where the history starts, on the same rail
   and in the same order of time, but it is not part of the story the
   rail tells. So it covers the rail's line and the ink that runs down
   it, which both start at the top of the list and so are only seen from
   the start entry down, and it draws a line of its own: dotted, fading
   in from nothing at the top, the way the solid line does.

   The cover is the band's own colour, and above the exhibit wash for
   the reason the cards are (see "Chronology" in chronicle.css). */
.tl-before {
  position: relative;
  z-index: 3;
  padding-top: 22px;
  background: var(--bg-band);
}

/* The rail's own top padding moves inside the cover, or the solid line
   would show in it, above the background. */
.tl:has(> .tl-before) { padding-top: 0; }

.tl-pro {
  list-style: none;
  position: relative;
  padding-bottom: 14px;
}

.tl-pro::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  border-left: 2px dotted var(--tl-n-line);
  mask-image: linear-gradient(180deg, transparent, #000 140px);
}

/* Its phase is the rail's first, and keeps the band's colour round it
   as the first one always does. Its name is quieter than a phase of the
   history's own. */
.tl-pro .tl-phase-l { color: var(--muted); }

/* A background card is the same card on the same stock, with nothing
   raised: no shadow, a little narrower, and its mark is never inked,
   because nothing above the start is part of what has been read. */
.tl-pre .tl-c { box-shadow: none; }
.tl-pre .tl-h { font-size: 1.06rem; }
.tl-pre .tl-b { font-size: 0.92rem; color: var(--ink-2); }
.tl-pre .tl-date { color: var(--faint); }

.tl-ev.tl-pre::before {
  border-style: dotted;
  animation: none !important;
}

@media (hover: hover) {
  .tl-pre .tl-c:hover { box-shadow: var(--tl-lift); }
}

@media (width > 900px) {
  .tl-pre .tl-c { max-width: 440px; }
}

/* ── the start ──
   The first entry of the history proper. Its mark is the one the solid
   line runs down from: larger than any other, the ink of the rail
   inside a ring of the band, so the dotted line above ends on it and
   the solid one leaves from under it. The collar is wide enough to hide
   the few pixels of the solid line that would otherwise show above it,
   in the row's own padding. */
.tl-start .tl-c { border-top: 3px solid var(--ink); }

.tl-start .tl-date { color: var(--ink); }

@media (width > 900px) {
  .tl-ev.tl-start::before {
    width: 23px;
    height: 23px;
    margin-left: -11.5px;
    top: calc(12px + 1.5px - 11.5px);
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--ink);
    box-shadow: inset 0 0 0 4px var(--bg-band), 0 0 0 5px var(--bg-band);
    animation: none !important;
  }

  /* The card's own top edge is 3px of ink, and the mark sits on it. */
  .tl-start .tl-c { padding-top: 26px; }
}

/* ── an event folded into a card ──
   Smaller events ride in the drawer of the card they belong with, each
   with its date and a name of its own, and each followed by its own
   sources, so it is clear which link backs which. */
.tl-x-f .tl-x-d {
  margin-right: 0.55em;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.tl-x-f .tl-x-h { font-weight: 600; color: var(--ink); }

/* A link from one card to another is in the copy, not a citation. */
.tl-xref {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s, color 0.15s;
}

.tl-xref:hover,
.tl-xref:focus-visible { color: var(--ink); text-decoration-color: var(--court); }

/* ── disputed ──
   A stamp in the corner of the date, like a ruling's, but not in any
   ink of its own: it does not say who is right, only that the drawer
   carries more than one account. */
.chip-q {
  border-style: dashed;
  color: var(--muted);
  font-weight: 500;
}

/* ── the end card ──
   Its sources, under the closing lines, as on a card. */
.tl-end-in .tl-cite { margin-top: 18px; }

/* ── narrow ──
   One column, the rail at the left edge. The background's line moves
   with it; the start entry's card comes first in its row, ahead of the
   two sides' cards, so its mark is where the solid line begins, and a
   strip of the band's colour hides the solid line between the top of
   the row and the mark, carrying the dotted one down to it instead. */
@media (width <= 900px) {
  .tl-pro::before { left: 8px; }

  .tl-start > .tl-c::before {
    width: 17px;
    height: 17px;
    left: -33.5px;
    top: 15px;
    border: 3px solid var(--ink);
    background: var(--ink);
    color: var(--ink);
    box-shadow: inset 0 0 0 3px var(--bg-band), 0 0 0 4px var(--bg-band);
    animation: none !important;
  }

  .tl-start::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    width: 6px;
    height: 30px;
    z-index: 3;
    background: var(--bg-band);
    background-image: radial-gradient(circle, var(--tl-n-line) 1px, transparent 1.4px);
    background-size: 6px 6px;
    background-position: 0 1px;
    background-repeat: repeat-y;
  }
}

@media print {
  .tl-before { background: none; }
}