/* =========================================================================
   DTA Collectibles — the series archive and the title index

   Implements series-archive.html, plus the title index that mockup has no
   drawing of. Loaded on /title/<term>/ and on the page using
   page-title-index.php, on top of archive.css.

   Mockup class -> theme class, where they differ:
     .intro       -> .dta-intro .dta-series__intro
     .run         -> .dta-run          the run at a glance
     .issues      -> .dta-run__issues
     .iss         -> .dta-run__iss
     .gap         -> .dta-run__gap
     .toolbar     -> .dta-toolbar .dta-series__toolbar   (archive.css owns the
                                                          shared half)
     .rows / .row -> .dta-rows / .dta-row
     .axes        -> .siblings .dta-series__axes         (the lateral row from
                                                          archive.css, reused)

   .band-head, .chips and .chip come from archive.css, which is where they moved
   when this page became the second one using them.

   NOT IMPLEMENTED: .want, the want-list form. It collects an email address and
   promises to get in touch, and there is nothing behind it to get in touch —
   see PORTING.md. A form that posts nowhere is worse than no form.
   ====================================================================== */

/* =========================================================================
   1. INTRO
   ====================================================================== */

.dta-series__intro h1 {
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  color: var(--c-text-strong);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
}

.dta-series__lede p {
  max-width: 68ch;
  margin: 0;
}

.dta-series__lede b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
  font-feature-settings: var(--num-tabular);
}

/* =========================================================================
   2. THE RUN AT A GLANCE
   =========================================================================

   Two shapes out of one block — a chip per issue below the threshold, buckets
   of a hundred above it. The CSS does not know which it is drawing: both are a
   wrapping row, and the only difference is what is in it. That is deliberate,
   because the threshold is a number in PHP and should not need a second
   stylesheet to move.
   ====================================================================== */

.dta-run {
  border-bottom: var(--rule);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
}

.dta-run .band-head { margin-bottom: var(--s-2); }

.dta-run__sub,
.dta-run__foot {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  max-width: 68ch;
  margin: 0 0 var(--s-3);
}

.dta-run__foot { margin: var(--s-3) 0 0; }

.dta-run__issues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: stretch;
}

/* An issue we hold. Tabular figures so the numbers line up down a wrapped
   grid rather than shuffling by a pixel per digit. */
.dta-run__iss {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  min-width: 3.5rem;
  text-align: center;
  font-feature-settings: var(--num-tabular);
}

.dta-run__iss b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

/* An issue numbered some other way — Annual 2001, Minus 1, 1/2, Book Two.
   Wider, left-aligned and not tabular, because none of those are true of it:
   a designation is a phrase, not a figure, and setting it in a 3.5rem centred
   box with tabular numerals is the typography of the number line it is not on. */
.dta-run__iss--other {
  min-width: 0;
  text-align: left;
  font-feature-settings: normal;
  border-style: dashed;
}

.dta-run__sub--other { margin-top: var(--s-4); }

/* A gap reads as absence, so it is drawn as absence: no border, no box, just
   the words in the space where issues would have been. */
.dta-run__gap {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  color: var(--c-text);
  line-height: var(--lh-snug);
  align-self: center;
  padding: 0 var(--s-2);
  text-align: center;
}

/* A bucket that cannot be a link — the list is not in issue order, so there is
   no page to send anyone to. Same figure, visibly not clickable. */
.chip--static {
  color: var(--c-text);
  cursor: default;
}

/* =========================================================================
   3. THE LIST — rows, not cards
   =========================================================================

   Every product on this page shares a title and very nearly a cover, so a grid
   of thumbnails is fifty pictures of the same thing. What tells two copies
   apart is the issue, the grade, the cert and the price, and those are what a
   row puts in a readable line.
   ====================================================================== */

.dta-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dta-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: var(--rule);
  margin: 0;
  /* A bucket link lands on a row, so a row has to be able to be landed on: the
     anchor clears the top of the viewport rather than tucking the row against
     it. */
  scroll-margin-top: var(--s-5);
}

.dta-row__image img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule);
  background: var(--c-surface-sunk);
}

.dta-row__body h3 {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
}

.dta-row__body h3 a {
  color: var(--c-text-strong);
  text-decoration: none;
}

.dta-row__body h3 a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

/* The facts, as pairs on one line each. A definition list because that is what
   they are, laid out in two columns so the labels form a readable rail. */
.dta-row__body dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--s-3);
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  margin: 0;
  /* Capped rather than left to fill the column. The middle track is 1fr so the
     price stays flush right at any width, which at 1440 leaves the facts a
     1,170px rail with a two-word value at one end of it. A definition list is
     read down, not across. */
  max-width: 44ch;
}

.dta-row__body dt {
  color: var(--c-text);
  font-weight: var(--w-regular);
}

.dta-row__body dd {
  margin: 0;
  color: var(--c-text-strong);
  font-feature-settings: var(--num-tabular);
}

.dta-row__buy {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}

.dta-row__price {
  font-size: var(--t-md);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  white-space: nowrap;
  font-feature-settings: var(--num-tabular);
}

/* The add-to-cart button is WooCommerce's markup, so it arrives with whatever
   OceanWP gives .button. Stated here so the row does not change shape with the
   theme's own styling, and matched to the header's search button, which is the
   only other primary action in this design. */
.dta-row__buy .button {
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  background: var(--c-accent);
  color: var(--c-text-invert);
  border: 0;
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-4);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.dta-row__buy .button:hover {
  background: var(--c-accent-hover);
  color: var(--c-text-invert);
}

/* An unpurchasable copy still links to its page; it just does not shout. */
.dta-row__buy .button.product_type_external,
.dta-row__buy .button:not(.add_to_cart_button):not(.ajax_add_to_cart) {
  background: transparent;
  color: var(--c-text-strong);
  border: var(--rule);
}

/* =========================================================================
   4. TOOLBAR
   =========================================================================

   .dta-toolbar in archive.css lays out the row; this only has to place a sort
   control that is ours rather than WooCommerce's.
   ====================================================================== */

.dta-series__sort { margin-left: auto; }

.dta-series__sort select {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-3);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text-strong);
  max-width: 100%;
}

/* =========================================================================
   5. THE TITLE INDEX
   =========================================================================

   Seven thousand rows in one document, which is the point — the reason to come
   here rather than search is that the browser's own find will hit anything on
   the page.

   THE LETTER BLOCKS USED TO CARRY content-visibility: auto AND IT HAS BEEN
   REMOVED. It is worth writing down why, because it is the obvious thing to
   reach for on a page this long and it will be suggested again.

   Measured on staging, /all-titles/, 1440x900, Sept 9:

     document height as the browser reported it        42,022 px
     document height with every block laid out        103,923 px
     #letter-x believed to be at                       15,449 px
     #letter-x actually at                            ~101,000 px

   contain-intrinsic-size was `auto 600px`, so each of the 28 blocks that had
   never been scrolled to stood in at 624px. The real blocks run from 183px
   (the symbol bucket, 7 rows) to 11,982px (S, 875 rows) — a 65x spread. Every
   anchor's offsetTop is the sum of the blocks above it, so the jump bar was
   asking the browser to scroll to a coordinate computed from 27 placeholders
   that were wrong by a factor of six. 15,449px in the true layout is inside B.
   That is the whole bug: the nav highlighted the letter it was asked for and
   the viewport showed wherever that stale coordinate landed.

   PER-BLOCK SIZING DOES NOT FIX IT, which was the first thing tried on paper.
   A block's height is 95px of heading plus about 49px per row per column, and
   ceil(rows / columns) gets within about 10% — the residual is titles long
   enough to wrap, which PHP cannot know because it does not know the column
   width in pixels. 10% per block, compounded over the 27 blocks above Z, is
   still several viewports of error. An estimate does not have to be good here,
   it has to be exact, and it cannot be.

   WHAT IT WAS BUYING, measured the same session by forcing a full relayout:
   331ms warm, 567ms cold, once. Laying the whole index out as CSS grid instead
   of multicol costs 346ms, so the cost is 7,407 flex items rather than the
   column balancer and there is no layout mode that avoids it. Against that: a
   jump bar that lands on the right letter, a scrollbar whose length is true
   rather than 40% of true, and find-in-page — the affordance this page is
   built around, and the one that pulls skipped blocks back into layout anyway —
   working over a document the browser has actually measured.

   One third of a second, once, is the right price for that. If this page ever
   needs the time back, the lever is fewer rows (a per-letter page) or lighter
   rows, not a height the browser has to guess.
   ====================================================================== */

.dta-index__jump {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  background: var(--c-surface);
  border-bottom: var(--rule);
  padding: var(--s-3) 0;
  margin-bottom: var(--s-4);
}

.dta-index__jump a {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  text-decoration: none;
  color: var(--c-text-strong);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius);
}

.dta-index__jump a:hover {
  background: var(--c-muted);
  color: var(--c-accent);
}

.dta-index__letter {
  padding-top: var(--s-5);
}

/* Cleared by the sticky jump bar, so an anchor does not land under it.
   THE SECOND HALF OF THE JUMP BUG, and it survives the first fix on its own:
   this was `4rem`, and the root font-size on this site is 10px, so it computed
   to 40px against a bar measured at 58px / 95px / 133px as its 28 letters wrap
   to one, two or three rows. Even a perfectly landed anchor put the section's
   h2 and its first rows underneath the bar.
   The bar's height depends on the width of the content column rather than the
   viewport, so there is no breakpoint at which a smaller number is reliably
   safe. This clears the three-row worst case at every width. Where the bar is
   shorter the extra space shows the tail of the previous letter, which reads
   as a boundary rather than as a mistake. */
.dta-index__letter { scroll-margin-top: 141px; }

.dta-index__letter h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  border-bottom: var(--rule);
  padding-bottom: var(--s-2);
  margin: 0 0 var(--s-3);
}

.dta-index__letter ul {
  columns: 4 260px;
  column-gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
}

.dta-index__letter li {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 1px 0;
}

.dta-index__letter a {
  color: var(--c-text);
  text-decoration: none;
  min-width: 0;
}

.dta-index__letter a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

/* The count. Not the leader-dotted row the sections list uses: at this density
   seven thousand dotted rules is visual noise, and the figure only has to be
   readable enough to tell a run from a single issue. */
.dta-index__letter i {
  font-style: normal;
  color: var(--c-border-focus);
  font-feature-settings: var(--num-tabular);
  flex: none;
}

.dta-index__letter li:hover i { color: var(--c-text); }

/* =========================================================================
   6. NARROW
   ====================================================================== */

@media (max-width: 760px) {
  .dta-row {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: var(--s-3);
  }
  /* The price and button drop under the facts rather than squeezing a third
     column into a phone. */
  .dta-row__buy {
    grid-column: 2;
    text-align: left;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
  }
  .dta-series__intro h1 { font-size: var(--t-lg); }
  .dta-index__letter ul { columns: 1; }
}