/* The archetype page's own rules (templates/archetype.html and the archetype not-found
   page).
   Linked after site.css. On a page where a deck list can open, deck-view.css follows it. */

.color-unavailable, .art-credit { color: var(--muted); font-size: .75rem; }
.art-credit { margin: .8rem 0 0; }
.card-empty { margin: 0; color: var(--muted); font-size: .9rem; }

/* ---- redesign ticket 08: the archetype stock list -------------------------------
   Every card is a per-copy ladder. The request supplies only --slot-width through the nonced
   style block; this stylesheet owns all geometry and both certainty colours. */

/* paperbuild ticket 15: the frame and the body share one grid cell, so the hero grows with its
   copy instead of letting a tall body spill above the art. The art fills the frame and the frame
   fills the cell, so the art credit stays at the bottom corner, under the body's bottom padding,
   whatever the body holds. That padding is what keeps the hero's sentence clear of the credit
   when the sentence wraps on a phone. */
.archetype-hero { position: relative; display: grid; width: min(100% - 2rem, 70rem); margin-inline: auto; }
.archetype-hero-frame, .archetype-hero-body { grid-area: 1 / 1; }
.archetype-hero-frame { position: relative; min-height: clamp(13rem, 26vw, 21rem); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.archetype-hero-art, .archetype-art-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; background: var(--panel-strong); }
.archetype-art-fallback { display: grid; place-items: center; color: var(--muted); font-size: 3rem; border: 2px dashed var(--line); }
/* Two layers, as in the prototype. The vertical one shapes the frame top to bottom; the
   horizontal one darkens the left side, where the eyebrow, the title and the pips sit. Without
   it the copy's own backdrop is whatever the art crop happens to be, which is where the eyebrow
   loses its contrast on a bright crop.
   Lighter than the prototype's own values on purpose, so more of the art shows through. The
   floor is the h1: against a fully white crop its worst pixel measures 3.40:1, over the 3:1
   AA floor for large text. Going lighter than this drops it under. */
.archetype-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(17 19 25 / 78%) 0, rgb(17 19 25 / 26%) 30%, rgb(17 19 25 / 78%) 72%, var(--bg) 100%), linear-gradient(90deg, rgb(17 19 25 / 55%) 0, rgb(17 19 25 / 10%) 50%, rgb(17 19 25 / 0%) 100%); }
.archetype-hero-frame .art-credit { position: absolute; right: 1rem; bottom: .35rem; z-index: 1; margin: 0; color: rgb(255 255 255 / 58%); font-size: .65rem; }
.archetype-hero-body { position: relative; z-index: 2; align-self: end; padding: 1.2rem 1.2rem 1.7rem; }
/* redesign ticket 52: the back link is the hero's eyebrow, so it takes the site's own
   `.eyebrow` token from the template instead of restating it here. Only the spacing, the
   link and its legibility are the hero's business. Hover underlines rather than changing
   hue: gold is the site's one accent, and a second colour here would be a new one.
   The shadow is what makes the accent safe. Gold measures 9.58:1 on the page background,
   but the eyebrow is drawn over the hero art, and at 375px it lands where the scrim is at
   its thinnest. Over a bright crop the glyphs measured 1.00:1 there without it, and no text
   colour on the site clears the bar at that spot: the shipped grey measured 1.20:1 and white
   1.63:1. Three stacked drops of #0b0d12, the near-black `.ladder-value` already uses over
   the same kind of backdrop, took the worst glyph pixel to 5.41:1 at 375px and 8.12:1 at
   1280px, both over the 4.5:1 AA floor for small text.
   Those numbers were measured against the earlier single-layer scrim. The horizontal layer
   added since only darkens that backdrop, so they are a floor, not a ceiling. It does not
   make the shadow redundant: bare gold over a bright crop still measured 2.90:1 at 375px
   with both layers, under the 4.5:1 floor. */
.archetype-back { margin: 0 0 .65rem; }
.archetype-back a { color: inherit; text-decoration: none; text-shadow: 0 0 2px #0b0d12, 0 0 4px #0b0d12, 0 0 8px #0b0d12; }
.archetype-back a:hover { text-decoration: underline; }
.archetype-hero h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem; margin: 0; font-size: clamp(2.1rem, 6vw, 4rem); font-weight: 850; line-height: .95; letter-spacing: -.045em; }
.archetype-title-identity .color-identity { gap: .22rem; min-height: 0; }
.archetype-title-identity .color-pip { width: clamp(2.3rem, 5vw, 3.3rem); height: clamp(2.3rem, 5vw, 3.3rem); filter: drop-shadow(0 2px 6px rgb(0 0 0 / 60%)); }
.archetype-title-plain { display: inline-grid; width: clamp(2.3rem, 5vw, 3.3rem); height: clamp(2.3rem, 5vw, 3.3rem); place-items: center; color: var(--muted); font-size: .65em; border: 1px solid var(--line); border-radius: 50%; }
.archetype-hero .tournament-facts { margin-top: .55rem; }
.archetype-picker { margin: .7rem 0 0; }
.archetype-content { padding-bottom: 5rem; }
/* The win rate's interval bar sits under its label, so the number above it stays the vital's
   own heading. `.page-vital span` reaches every span inside the vital, including the bar's
   own pieces, so the offset it gives a label is cleared here. */
.archetype-content .page-vital:nth-child(2) .ladder-spine { display: block; height: .95rem; margin-top: .45rem; }
.archetype-content .page-vital:nth-child(2) .ladder-spine > span { margin-top: 0; }
.archetype-content .page-vital:nth-child(2) .ladder-interval { height: .7rem; }
.archetype-content .page-vital:nth-child(2) .ladder-bar { height: .3rem; }
.stock-boards { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: start; }
.stock-board { position: relative; min-width: 0; padding-bottom: 6.3rem; }
.stock-band { margin-bottom: 1.15rem; }
.stock-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.stock-band-head h3 { margin: 0; color: var(--text); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.stock-band-head span { color: var(--quiet); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-board-main .stock-rows { columns: 2 15rem; column-gap: 1.2rem; }
/* One declaration owns the gap, so a row's bar and the legend's worked examples are drawn by
   the same encoding. The cells do not grow: four copies have to read as four pills, not as one
   smooth block. */
.slot-bar { display: flex; gap: 2px; }
.slot-cell { position: relative; display: block; flex: 0 1 .55rem; min-width: 0; width: .55rem; height: .9rem; overflow: hidden; background: rgb(255 255 255 / 5%); border-radius: 1px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); }
/* A basic land registers up to twenty-three copies, and no bar draws twenty-three pills in the
   width four pills take. Past ten copies each pill would be thinner than the gap beside it, so
   those bars close up into one block again and the cells share the column. The ink is the
   number, so the pill gives way and the ink never does. */
.slot-bar:has(> .slot-cell:nth-child(11)) { gap: 0; }
.slot-bar:has(> .slot-cell:nth-child(11)) .slot-cell { flex: 1 1 .55rem; }
.slot-fill { position: absolute; inset: 0 auto 0 0; width: var(--slot-width); }
.slot-cell.is-settled .slot-fill { background: #c9d1e4; }
.slot-cell.is-argued .slot-fill { background: #9a78dd; }
/* The cost is the site's own mana symbols, as the deck view draws them. Drawn as text, a
   three-symbol cost clipped in this column; the track now grows to the widest cost on the
   board and the name beside it takes what is left. */
.stock-cost { display: flex; justify-content: flex-end; min-width: 0; }
.stock-cost .mana-cost { gap: .08rem; }
.stock-cost .mana-cost-symbol { width: .74rem; height: .74rem; }
.stock-name { overflow: hidden; font-size: .86rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.stock-rate { color: var(--quiet); font-size: .74rem; font-variant-numeric: tabular-nums; text-align: right; }
.stock-row.is-argued .stock-name { color: var(--muted); font-weight: 550; }
.stock-row.is-argued .stock-rate { color: #b99af2; }
.slot-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: -.25rem 0 .85rem; color: var(--quiet); font-size: .72rem; }
.slot-legend > span { display: flex; align-items: center; gap: .4rem; }
/* The legend keeps only its smaller size. The gap it reads by now belongs to `.slot-bar`. */
.slot-legend .slot-cell { flex-basis: .42rem; width: .42rem; height: .75rem; }
.legend-all { --slot-width: 100%; }
.legend-quarter { --slot-width: 25%; }
.legend-mixed .slot-cell:first-child { --slot-width: 96%; }
.legend-mixed .slot-cell:last-child { --slot-width: 40%; }
.stock-tail { margin: .45rem 0 0; padding: .5rem .25rem 0; color: var(--quiet); font-size: .78rem; border-top: 1px dashed var(--line); }
.stock-row-caption { position: absolute; right: 0; bottom: 0; left: 0; box-sizing: border-box; height: 5.4rem; overflow: auto; padding: .65rem .75rem; color: var(--muted); font-size: .78rem; line-height: 1.45; background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; }
.stock-row-caption { z-index: 1; visibility: hidden; opacity: 0; }
.stock-row-caption b, .stock-row-caption span { display: block; }
.stock-row-caption span { margin-top: .25rem; color: var(--text); font-variant-numeric: tabular-nums; }
.stock-row:hover .stock-row-caption, .stock-row:focus .stock-row-caption { visibility: visible; opacity: 1; }
/* With scripting the preview replaces the per-row strip. Without it, the strip is what a reader
   pointing at a row gets, exactly as before. */
.js-card-preview .stock-row-caption { display: none; }
.archetype-section { margin-top: 2.2rem; }
/* The pilots close the rail column, so they are their own row of the layout rather than a child of
   the rail: on one column the rail comes first and the list has to stay next to it, with the pilots
   last. Tighter than `.archetype-section` because they are the second block of one column, not a
   new section of the page. */
.archetype-pilots { margin-top: .6rem; }
.js-deck-pane .archetype-list-layout > .archetype-pilots { grid-area: pilots; margin-top: 0; }
/* The pilots are one tight board, best results first: a reader is looking for who plays the deck
   well. Each row is one link: the handle, then the record and its rate in two right-aligned
   columns, then a quiet line saying what the record was earned over. The board is only as wide
   as its rows, so the figures sit next to the handles rather than across an empty column. The two
   lists (shown and folded) share fixed figure columns, so they line up when the fold opens. The
   figures take `--quiet`, which clears 4.5:1 on `--panel`. */
.pilot-board { width: fit-content; min-width: min(100%, 16rem); max-width: 100%; margin-top: .6rem; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: .4rem; }
.pilot-rows { margin: 0; padding: 0; list-style: none; }
.pilot-rows > li + li, .pilots-more > .pilot-rows > li:first-child { border-top: 1px solid var(--line); }
.pilot-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem 2.4rem; column-gap: .75rem; align-items: baseline; padding: .3rem .6rem; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.pilot-row:hover { background: var(--panel-strong); }
.pilot-row:hover b { color: var(--gold); }
/* A handle is the one thing on this row whose length the page does not set, so it wraps inside the
   board and the figures never break, which is how every other handle on the site is treated. */
.pilot-row b { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: .84rem; font-weight: 700; }
.pilot-record { color: var(--text); font-size: .8rem; font-weight: 650; text-align: right; white-space: nowrap; }
.pilot-no-record { grid-column: span 2; color: var(--quiet); font-weight: 600; }
.pilot-rate { color: var(--muted); font-size: .74rem; text-align: right; white-space: nowrap; }
.pilot-detail { grid-column: 1 / -1; color: var(--quiet); font-size: .7rem; line-height: 1.3; }
/* The League tally takes the site's League treatment (`.archetype-list-finish.is-league`): a 5-0
   is a result, not a place, and it is not the paper green, because these pilots are all MTGO. */
.pilot-league { color: var(--muted); font-weight: 700; }
.pilots-more > summary { padding: .35rem .6rem; color: var(--muted); font-size: .74rem; font-weight: 600; border-top: 1px solid var(--line); cursor: pointer; list-style: none; }
.pilots-more > summary::-webkit-details-marker { display: none; }
.pilots-more > summary:hover { color: var(--gold); }
.pilots-more:not([open]) .pilots-more-close, .pilots-more[open] .pilots-more-open { display: none; }

@media screen and (max-width: 62rem) {
  .stock-boards { grid-template-columns: minmax(0, 1fr); }
  .stock-board-main .stock-rows { columns: 1; }
}

@media screen and (max-width: 34rem) {
  .archetype-hero-body { padding-inline: .5rem; }
  .archetype-content .page-vital { flex-basis: 42%; }
  .stock-cost { display: none; }
}