/* The insert set under a card's slab (app/views/inserts/): two-sided cards, a headline on the front and the detail
   on the back, each turning over with the slab's flat flip (.flip in profile.css). Type is in cqw of the card, so a
   set two across on a phone reads like one four across on a desktop. */
@layer profile {
  .inserts { margin-top: var(--space-6); }
  .inserts__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
  /* The first-visit hint (flip_hint_controller): its own row under the heading, while the first card leans. */
  .inserts__hint { order: 3; flex-basis: 100%; display: flex; align-items: center; gap: 0.5rem; margin: 0; font: 700 0.8rem/1.2 var(--label-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cheddar, #f5c84b); }
  .inserts__hint[hidden] { display: none; }
  .inserts__hint svg { flex: none; width: 1.1rem; height: 1.1rem; fill: currentColor; }
  [data-edition="vintage"] .inserts__hint { color: #9b2a22; }
  @media (prefers-reduced-motion: no-preference) {
    .inserts.is-hinting .insert:first-child .flip--insert { animation: insert-lean 1.4s ease-in-out 0.4s 2; }
  }
  @keyframes insert-lean {
    0%, 100% { transform: perspective(900px) rotateY(0deg); }
    45% { transform: perspective(900px) rotateY(-32deg); }
    75% { transform: perspective(900px) rotateY(6deg); }
  }
  .inserts__heading { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font-size: 1.4rem; text-transform: uppercase; }
  .flip--insert:focus-visible { outline: 3px solid var(--cheddar, #f5c84b); outline-offset: 4px; border-radius: 6cqw; }
  .inserts__heading small { font: 600 0.8rem/1 var(--label-font); letter-spacing: 0.14em; color: var(--ink-muted); }
  /* As many across as fit at 20rem or more, one on a phone: the cards' type is in cqw of the card, so a card that
     wide keeps it at readable sizes (every line 11px or more, nearly all 12px or more), and the floors are rem so a
     larger text setting raises them. Always smaller than the slab above. */
  .inserts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-4); }

  .insert { aspect-ratio: 5 / 7; container-type: inline-size; }
  .flip--insert { width: 100%; height: 100%; transform: none; }
  .flip--insert .flip__inner { height: 100%; transform: perspective(1200px) rotateY(var(--flip-angle, 0deg)); }
  .insert__face {
    height: 100%; display: flex; flex-direction: column; gap: 3cqw; padding: 6cqw; border-radius: 6cqw; overflow: hidden;
    background: linear-gradient(165deg, color-mix(in srgb, var(--team-primary) 80%, #000), #0b0f1d 72%);
    border: 2px solid color-mix(in srgb, var(--cheddar, #f5c84b) 75%, transparent); box-shadow: 0 14px 32px rgb(0 0 0 / 0.45); color: #fff;
  }
  .insert__face--back {
    background-color: #0e1426; border-color: color-mix(in srgb, var(--team-accent) 70%, transparent);
    background-image: linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
    background-size: 8cqw 8cqw;
  }
  .insert__header { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
  .insert__kicker { font: 700 max(4.6cqw, 0.6875rem)/1.1 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cheddar, #f5c84b); }
  .insert__number { font: 600 max(4cqw, 0.6875rem)/1 var(--label-font); color: rgb(255 255 255 / 0.55); white-space: nowrap; }
  .insert__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3cqw; text-align: center; }
  .insert__face--back .insert__body { justify-content: flex-start; align-items: stretch; text-align: left; }
  /* Clipped, so a long name ends in an ellipsis rather than widening the card. */
  .insert__footer { display: flex; justify-content: center; min-width: 0; overflow: hidden; }
  .insert__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 max(4cqw, 0.6875rem)/1 var(--label-font); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
  .insert a { color: inherit; text-decoration: none; }
  .insert a:hover { text-decoration: underline; }

  .insert__title { font: 900 max(9cqw, 13px)/1.05 var(--label-font); text-transform: uppercase; }
  .insert__title--small { font-size: max(6.4cqw, 11px); }
  .insert__line { margin: 0; font-size: max(5.4cqw, 0.6875rem); color: rgb(255 255 255 / 0.8); }
  .insert__note { margin: auto 0 0; font-size: max(4.4cqw, 0.6875rem); color: rgb(255 255 255 / 0.6); }
  .insert__big { display: grid; justify-items: center; gap: 2cqw; }
  .insert__big b { font: 900 max(22cqw, 30px)/1 var(--label-font); color: var(--cheddar, #f5c84b); }
  .insert__big span { font: 800 max(8cqw, 12px)/1.1 var(--label-font); text-transform: uppercase; }
  .insert__big small { font-size: max(5cqw, 0.6875rem); color: rgb(255 255 255 / 0.7); }
  .insert__big--attribute b { font-size: max(20cqw, 27px); color: #fff; }
  /* Under the Hood: the attribute's glyph, its score in a ring filled to it, the name. */
  .attribute-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  /* Spaced as the headshot cards are: the label sits where their names do. */
  .insert__big--attribute { gap: 3cqw; }
  /* Under the label, muted, as the line under a player's name is on the headshot cards. */
  /* Muted as a whole (opacity on the drawing, solid lines inside): a translucent stroke would darken where lines cross. */
  .attribute-icon--front { width: max(23cqw, 32px); height: max(23cqw, 32px); color: #fff; opacity: 0.38; }
  .attribute-icon--title { width: 1.1em; height: 1.1em; margin-right: 1.6cqw; vertical-align: -0.2em; color: var(--cheddar, #f5c84b); }
  /* The ring and the headshot discs (Connections, Rivals, Chemistry) share one size, 95% of --insert-disc, with a
     border as thick as the ring's line. */
  .insert { --insert-disc: max(56cqw, 76px); }
  /* A front with a disc stacks from the top at one offset, so the discs line up across the set whatever the text
     under them runs to. */
  .insert__face--front .insert__body:has(.insert__ring, > .insert__headshot) { justify-content: flex-start; padding-top: 9cqw; }
  .insert__ring { display: grid; place-items: center; width: calc(var(--insert-disc) * 0.95); aspect-ratio: 1; }
  .insert__ring > * { grid-area: 1 / 1; }
  .attribute-ring { width: 100%; height: 100%; }
  .attribute-ring circle { fill: none; stroke-width: 5; }
  .attribute-ring__track { stroke: rgb(255 255 255 / 0.1); }
  .attribute-ring__fill { stroke: var(--cheddar, #f5c84b); stroke-linecap: round; }
  /* Where his score sits among everyone's at his position: their histogram, his bar lit. */
  .insert__field { margin: auto 0 0; padding-top: 2cqw; }
  .attribute-histogram { display: block; width: 100%; height: max(12cqw, 18px); }
  .attribute-histogram__bar { fill: rgb(255 255 255 / 0.22); }
  .attribute-histogram__bar.is-his { fill: var(--cheddar, #f5c84b); }
  .insert__field figcaption { display: flex; justify-content: space-between; margin-top: 1cqw; font: 600 max(3.4cqw, 0.6875rem)/1 var(--label-font); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
  [data-edition="vintage"] .attribute-icon--front { color: rgb(42 33 24); }
  [data-edition="vintage"] .attribute-icon--title { color: #9b2a22; }
  [data-edition="vintage"] .attribute-ring__track { stroke: rgb(70 45 20 / 0.15); }
  [data-edition="vintage"] .attribute-ring__fill { stroke: #9b2a22; }
  [data-edition="vintage"] .attribute-histogram__bar { fill: rgb(70 45 20 / 0.22); }
  [data-edition="vintage"] .attribute-histogram__bar.is-his { fill: #9b2a22; }
  [data-edition="vintage"] .insert__field figcaption { color: rgb(42 33 24 / 0.6); }
  .insert__big--grade b { font-size: max(40cqw, 52px); background: linear-gradient(160deg, #fff1b5, #f5c84b 45%, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .insert__big--line b { font-size: max(15cqw, 20px); white-space: nowrap; }
  .insert__cups { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 3cqw; margin: 0; padding: 0; list-style: none; }
  .insert__cups .trophy-icon { width: 18cqw; height: 24cqw; }
  .insert__cups li:only-child .trophy-icon { width: 34cqw; height: 45cqw; }
  .insert__cups--small .trophy-icon, .insert__cups--small li:only-child .trophy-icon { width: 10cqw; height: 13cqw; }
  /* A career's case: every trophy a silhouette, --cup-columns across (trophy_case_columns), as large as that allows. */
  .insert__cups--all { --cup-gap: 1.8cqw; gap: var(--cup-gap); width: 84cqw; margin-inline: auto; }
  .insert__cups--all .trophy-icon, .insert__cups--all li:only-child .trophy-icon {
    width: min(28cqw, calc((82cqw - (var(--cup-columns) - 1) * var(--cup-gap)) / var(--cup-columns))); height: auto; aspect-ratio: 3 / 4;
  }
  .insert__cups--all li { display: flex; }
  /* The back's near misses: small outlines along the bottom. */
  .insert__misses { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; margin: auto 0 0; padding: 2cqw 0 0; list-style: none; }
  .trophy-icon--miss { width: max(4.4cqw, 9px); height: max(5.8cqw, 12px); }
  /* The name gives way (cut short) rather than widening the card. */
  .insert__list.insert__list--trophies li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .insert__list--trophies li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insert__list li.is-won small { color: var(--cheddar, #f5c84b); font-weight: 700; }
  [data-edition="vintage"] .insert__list li.is-won small { color: #9b2a22; }
  .insert__headshot { box-sizing: border-box; width: calc(var(--insert-disc) * 0.95); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: calc(var(--insert-disc) * 0.05) solid var(--cheddar, #f5c84b); background: rgb(255 255 255 / 0.08); }
  [data-edition="vintage"] .insert__headshot { border-color: #9b2a22; background: rgb(70 45 20 / 0.08); }
  .insert__logo { width: 50cqw; }
  .insert__stat-grid { display: grid; grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)); gap: 1.6cqw; margin: 0; }
  .insert__stat-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insert__stat-grid div { display: grid; gap: 1cqw; padding: 2.4cqw; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 3cqw; text-align: center; }
  .insert__stat-grid dt { font: 700 max(3.8cqw, 0.6875rem)/1 var(--label-font); letter-spacing: 0.1em; color: rgb(255 255 255 / 0.6); }
  .insert__stat-grid dd { margin: 0; font: 900 max(6.4cqw, 11px)/1 var(--label-font); white-space: nowrap; }
  .insert__stat-grid dd.is-long { font-size: max(5cqw, 0.6875rem); }
  .insert__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6cqw; margin: 0; padding: 0; list-style: none; }
  .insert__tiles--rows { grid-template-columns: minmax(0, 1fr); }
  .insert__tile { display: grid; gap: 0.8cqw; padding: 2.4cqw; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 3cqw; text-align: center; }
  .insert__tile dd { margin: 0; font: 900 max(7cqw, 12px)/1 var(--label-font); color: var(--cheddar, #f5c84b); }
  .insert__tile dt { font: 700 max(3.8cqw, 0.6875rem)/1.1 var(--label-font); letter-spacing: 0.1em; color: rgb(255 255 255 / 0.6); }
  .insert__tile small { font-size: max(3.6cqw, 0.6875rem); color: rgb(255 255 255 / 0.55); }
  .insert__tiles--rows .insert__tile { grid-template-columns: auto 1fr auto; align-items: center; gap: 2.4cqw; text-align: left; }
  /* A lone rank's back: the leaderboard around him, place, name, value, and a bar for the value. */
  .insert__board { display: grid; gap: 2.4cqw; margin: 0; padding: 0; list-style: none; font-size: max(4.8cqw, 0.6875rem); }
  .insert__board li { display: grid; grid-template-columns: max(6cqw, 2.2em) minmax(0, 1fr) auto; align-items: baseline; gap: 0.6cqw 2cqw; }
  .insert__board b { font: 900 max(4.8cqw, 0.6875rem)/1 var(--label-font); color: rgb(255 255 255 / 0.55); }
  .insert__board span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insert__board em { font: 800 max(4.8cqw, 0.6875rem)/1 var(--label-font); font-style: normal; }
  .insert__board i { grid-column: 2 / -1; height: max(1.2cqw, 3px); border-radius: 999px; background: linear-gradient(90deg, rgb(255 255 255 / 0.35) calc(var(--share) * 100%), rgb(255 255 255 / 0.07) 0); }
  .insert__board li.is-him :is(b, span, em) { color: var(--cheddar, #f5c84b); font-weight: 800; }
  .insert__board li.is-him i { background: linear-gradient(90deg, var(--cheddar, #f5c84b) calc(var(--share) * 100%), rgb(255 255 255 / 0.07) 0); }
  .insert__subheading small { font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: rgb(255 255 255 / 0.55); }
  [data-edition="vintage"] .insert__board b, [data-edition="vintage"] .insert__subheading small { color: rgb(42 33 24 / 0.55); }
  [data-edition="vintage"] .insert__board i { background: linear-gradient(90deg, rgb(70 45 20 / 0.35) calc(var(--share) * 100%), rgb(70 45 20 / 0.08) 0); }
  [data-edition="vintage"] .insert__board li.is-him :is(b, span, em) { color: #9b2a22; }
  [data-edition="vintage"] .insert__board li.is-him i { background: linear-gradient(90deg, #9b2a22 calc(var(--share) * 100%), rgb(70 45 20 / 0.08) 0); }
  /* A season's trophy: its whole field under it, a silhouette apiece. */
  .insert__trophy-field { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.8cqw 3cqw; margin: 0; padding: 0; list-style: none; font-size: max(3.8cqw, 0.6875rem); color: rgb(255 255 255 / 0.6); }
  .insert__trophy-field li.is-him { color: var(--cheddar, #f5c84b); font-weight: 700; }
  [data-edition="vintage"] .insert__trophy-field { color: rgb(42 33 24 / 0.65); }
  [data-edition="vintage"] .insert__trophy-field li.is-him { color: #9b2a22; }
  .insert__tiles--rows .insert__tile span { font-size: max(4.6cqw, 0.6875rem); font-weight: 600; }
  .insert__tiles--rows .insert__tile.is-won small { color: var(--cheddar, #f5c84b); font-weight: 700; }
  .trophy-icon--tile { width: max(6cqw, 12px); height: max(8cqw, 16px); filter: none; }
  [data-edition="vintage"] .insert__tile { border-color: rgb(70 45 20 / 0.2); }
  [data-edition="vintage"] .insert__tile dd, [data-edition="vintage"] .insert__tiles--rows .insert__tile.is-won small { color: #9b2a22; }
  [data-edition="vintage"] .insert__tile :is(small, dt) { color: rgb(42 33 24 / 0.6); }
  .insert__subheading { margin: 2cqw 0 1cqw; font: 700 max(4.2cqw, 0.6875rem)/1 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cheddar, #f5c84b); }
  .insert__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.4cqw; font-size: max(5.2cqw, 0.6875rem); }
  .insert__list li { display: flex; justify-content: space-between; gap: 2cqw; border-bottom: 1px solid rgb(255 255 255 / 0.08); padding-bottom: 1cqw; }
  .insert__list small { color: rgb(255 255 255 / 0.6); white-space: nowrap; }
  /* On the Ice's front: his line at the top, the ones he faced most at the bottom, a ruled "Against" between. */
  .insert__lineup { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 4cqw; padding: 3cqw 0 4cqw; }
  .insert__lineup:not(:has(.insert__lineup-versus)) { justify-content: center; }
  .insert__lineup-group { display: grid; gap: 2.4cqw; }
  .insert__line-row { display: flex; justify-content: center; gap: 1.5cqw; margin: 0; padding: 0; list-style: none; }
  .insert__line-row li { width: 27cqw; }
  .insert__line-row a { display: grid; justify-items: center; gap: 1.4cqw; text-decoration: none; }
  .insert__line-headshot { width: 15cqw; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.08); }
  .insert__line-row li.is-him .insert__line-headshot { border-color: var(--cheddar, #f5c84b); border-width: 3px; }
  .insert__line-row span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 max(3.5cqw, 0.6875rem)/1 var(--label-font); text-transform: uppercase; }
  .insert__line-row li.is-him span { color: var(--cheddar, #f5c84b); }
  .insert__lineup-versus { display: flex; align-items: center; gap: 3cqw; margin: 0; font: 800 max(3.6cqw, 0.6875rem)/1 var(--label-font); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
  .insert__lineup-versus::before, .insert__lineup-versus::after { content: ""; flex: 1; border-top: 1px solid currentColor; }
  [data-edition="vintage"] .insert__line-row li.is-him span { color: #9b2a22; }
  [data-edition="vintage"] .insert__line-row li.is-him .insert__line-headshot { border-color: #9b2a22; }
  /* Rivals' and On the Ice's backs: rows a little tighter than other lists so five of each list fit. */
  :is(.insert--rivals, .insert--on_ice) .insert__face--back .insert__body { gap: 0; }
  :is(.insert--rivals, .insert--on_ice) .insert__subheading { margin: 3cqw 0 1.2cqw; }
  :is(.insert--rivals, .insert--on_ice) .insert__subheading:first-child { margin-top: 0.4cqw; }
  :is(.insert--rivals, .insert--on_ice) .insert__list { gap: 1.4cqw; font-size: max(4.8cqw, 0.6875rem); }
  :is(.insert--rivals, .insert--on_ice) .insert__list li { padding-bottom: 1.4cqw; line-height: 1.25; }
  /* The rivalries: the name, then a column per count (fights when any, hit, hit by), labelled in the heading. */
  .insert__subheading--columns, .insert__list--columns li { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--columns), max(14cqw, 2.8rem)); gap: 1.6cqw 3cqw; align-items: baseline; }
  .insert__subheading--columns small, .insert__list--columns small { text-align: right; white-space: nowrap; }
  .insert__subheading--columns small { font-size: max(0.75em, 0.6875rem); letter-spacing: 0.02em; text-transform: uppercase; }
  .insert__list--columns a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insert__meters meter { max-width: none; }
  .insert__meters { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.4cqw; font-size: max(4.8cqw, 0.6875rem); }
  .insert__meters li { display: grid; grid-template-columns: 1fr auto; gap: 0.6cqw 2cqw; }
  .insert__meters meter { grid-column: 1 / -1; width: 100%; height: 2.2cqw; }
  /* Six rates (Defensive Awareness) sit closer, so the field still fits under them. */
  .insert__meters:has(> li:nth-child(6)) { gap: 1.2cqw; }

  [data-edition="vintage"] .insert__face { background: var(--noise-light), #f3e8cf; color: #2a2118; border: 3px double rgb(70 45 20 / 0.45); border-radius: 2cqw; box-shadow: 0 10px 24px rgb(0 0 0 / 0.35); }
  [data-edition="vintage"] .insert__face--back { background: var(--noise-light), #ece0c4; }
  [data-edition="vintage"] .insert :is(.insert__kicker, .insert__subheading, .insert__big b) { color: #9b2a22; }
  [data-edition="vintage"] .insert :is(.insert__number, .insert__name, .insert__line, .insert__note, .insert__big small, .insert__list small, .insert__stat-grid dt) { color: rgb(42 33 24 / 0.65); }
  [data-edition="vintage"] .insert__big--attribute b { color: #1f3f73; }
  [data-edition="vintage"] .insert__big--grade b { background: none; color: #9b2a22; }
  [data-edition="vintage"] .insert :is(.insert__stat-grid div, .insert__list li) { border-color: rgb(70 45 20 / 0.2); }

  /* Trophy silhouettes (TrophyIconsHelper): solid when won, an empty dashed outline when only in the running. */
  .trophy-icon { fill: var(--cheddar, #f5c84b); filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.45)); }
  .trophy-icon__line { fill: none; stroke: var(--cheddar, #f5c84b); stroke-width: 0.9; stroke-linecap: round; }
  /* Faded as a whole, for the same reason as the attribute glyphs: overlapping translucent strokes darken. */
  .trophy-icon--outline { filter: none; opacity: 0.7; }
  .trophy-icon--outline > * { fill: none; stroke: #fff; stroke-width: 0.9px; stroke-dasharray: 3px 2.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  /* Too small for dashes to read: a thin solid line. */
  :is(.trophy-icon--inline, .trophy-icon--miss).trophy-icon--outline > * { stroke-dasharray: none; stroke-width: 1px; }
  .trophy-icon--inline { display: inline-block; width: max(3.6cqw, 8px); height: max(4.8cqw, 11px); margin-right: 1.6cqw; vertical-align: -0.2em; filter: none; }
  [data-edition="vintage"] .trophy-icon { fill: #a37a14; }
  [data-edition="vintage"] .trophy-icon__line { stroke: #a37a14; }
  [data-edition="vintage"] .trophy-icon--outline { opacity: 0.55; }
  [data-edition="vintage"] .trophy-icon--outline > * { stroke: rgb(70 45 20); }

  /* The shot map: the attacking zone upright, net at the top (ShotMapHelper). */
  .shot-map { width: 100%; overflow: visible; }
  .shot-map__boards { fill: color-mix(in srgb, var(--surface-raised) 70%, transparent); stroke: var(--line); stroke-width: 0.6; }
  .shot-map__goal-line { stroke: color-mix(in srgb, #d23c3c 70%, transparent); stroke-width: 0.4; }
  .shot-map__blue-line { stroke: color-mix(in srgb, #3c64d2 80%, transparent); stroke-width: 1; }
  .shot-map__crease { fill: color-mix(in srgb, #5aa0ff 25%, transparent); stroke: color-mix(in srgb, #d23c3c 60%, transparent); stroke-width: 0.3; }
  .shot-map__net { fill: none; stroke: var(--ink-muted); stroke-width: 0.4; }
  .shot-map__circle { fill: none; stroke: color-mix(in srgb, #d23c3c 45%, transparent); stroke-width: 0.3; }
  .shot-map__faceoff { fill: color-mix(in srgb, #d23c3c 60%, transparent); }
  .shot-map__dot { fill: color-mix(in srgb, var(--ink-muted) 55%, transparent); }
  .shot-map__dot--goal { fill: var(--cheddar, #f5c84b); }
  [data-edition="vintage"] .shot-map__boards { fill: rgb(255 255 255 / 0.5); stroke: rgb(70 45 20 / 0.4); }
  [data-edition="vintage"] .shot-map__dot { fill: rgb(70 45 20 / 0.35); }
  [data-edition="vintage"] .shot-map__dot--goal { fill: #9b2a22; }

  /* A franchise's set (franchise_inserts). */
  /* The names it played as, each with that era's logo; the record's boxes, the counts along the bottom when a label
     wraps (OT losses). */
  .insert__list--eras span { display: flex; align-items: center; gap: 2cqw; min-width: 0; }
  .insert__era-logo { flex: none; width: 9cqw; height: auto; }
  .insert__list--eras small, .insert__list--numbers small { flex: none; color: rgb(255 255 255 / 0.6); white-space: nowrap; }
  .insert__stat-grid--record div { align-content: space-between; }
  .insert__stat-grid--record dt { letter-spacing: 0.06em; }
  /* Seasons as chips, as many across as their text allows; a heading over them with its count in a pill. */
  .insert__seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(18cqw, 6.4em), 1fr)); gap: 1.2cqw; margin: 0 0 2cqw; padding: 0; list-style: none; font: 700 max(3.6cqw, 0.625rem)/1 var(--label-font); letter-spacing: 0; }
  .insert__seasons li { padding: 1.4cqw 0; border-radius: 2cqw; background: rgb(255 255 255 / 0.07); text-align: center; white-space: nowrap; }
  .insert__seasons--many { grid-template-columns: repeat(auto-fill, minmax(max(15cqw, 6.4em), 1fr)); font-size: max(3.2cqw, 0.625rem); }
  .insert__seasons--many li { padding-block: 1cqw; }
  .insert__subheading--count { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2cqw; }
  .insert__subheading--count span { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insert__subheading--count small { padding: 0.8cqw 2cqw; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: #fff; font-weight: 800; letter-spacing: 0; }
  /* Retired numbers: a tile apiece in the club's number colors, his face in a ring over his number, a short last row
     centered; on the back, the
     number first, in two columns when there are many (the years then in each one's title). */
  .insert__retired { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw; width: 86cqw; margin: 0; padding: 0; list-style: none; }
  .insert__retired li { flex: 0 0 calc((100% - (var(--columns) - 1) * 2cqw) / var(--columns)); }
  .insert__retired a { text-decoration: none; }
  .insert__retired-tile { display: grid; justify-items: center; gap: 1cqw; padding: 1.4cqw 1.4cqw 1cqw; border-radius: 2.4cqw; background: var(--number-bg); color: var(--number-text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
  .insert__retired-tile img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: rgb(0 0 0 / 0.2); box-shadow: 0 0 0 0.5cqw var(--number-text); }
  .insert__retired-tile b { font: 900 calc(64cqw / var(--columns) / 2.4) / 1 var(--label-font); }
  .insert__retired-tile--number { height: 100%; align-content: center; }
  .insert__retired-tile--number b { font-size: calc(64cqw / var(--columns) / 1.6); }
  .insert__list--numbers li { display: grid; grid-template-columns: max(8cqw, 1.8em) minmax(0, 1fr) auto; align-items: baseline; }
  .insert__list--numbers b { font: 900 max(5.2cqw, 0.6875rem)/1 var(--label-font); color: var(--cheddar, #f5c84b); }
  .insert__list--numbers span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insert__list--numbers-many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqw 3cqw; font-size: max(3.8cqw, 0.625rem); }
  .insert__list--numbers-many li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .insert__list--numbers-many b { font-size: max(4cqw, 0.625rem); }
  .insert__list--numbers-many small { display: none; }
  /* Its leader boards: the leader's portrait large, his total, the category, and the leaders of the board's other
     categories below; the top ten as a table on the back, the ranked column in gold. */
  .insert__leader { display: grid; justify-items: center; gap: 1.6cqw; }
  .insert__leader-portrait { width: 44cqw; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: rgb(255 255 255 / 0.08); box-shadow: 0 0 0 1.2cqw var(--cheddar, #f5c84b); margin-bottom: 2cqw; }
  .insert__leader b { font: 900 max(16cqw, 24px)/1 var(--label-font); color: var(--cheddar, #f5c84b); }
  .insert__leader span { font: 800 max(6cqw, 12px)/1.1 var(--label-font); text-transform: uppercase; }
  .insert__leader small { font-size: max(4.6cqw, 0.6875rem); color: rgb(255 255 255 / 0.75); }
  .insert__leader-sides { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 2cqw; width: 100%; margin: 2cqw 0 0; }
  .insert__leader-sides div { display: grid; gap: 1cqw; padding: 2cqw; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 3cqw; }
  .insert__leader-sides dt { font: 700 max(3.4cqw, 0.625rem)/1 var(--label-font); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); }
  .insert__leader-sides dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(4cqw, 0.6875rem); }
  .insert__leader-sides dd b { font: 900 max(4.6cqw, 0.75rem)/1 var(--label-font); margin-right: 1cqw; }
  .insert__leader-table { width: 100%; border-collapse: collapse; font-size: max(4cqw, 0.6875rem); font-variant-numeric: tabular-nums; }
  .insert__leader-table thead th { padding: 0 0 1.4cqw 2.4cqw; font: 700 max(3.4cqw, 0.625rem)/1 var(--label-font); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; color: rgb(255 255 255 / 0.6); }
  .insert__leader-table thead th:nth-child(2) { text-align: left; }
  .insert__leader-table tbody :is(th, td) { padding: 1.1cqw 0 1.1cqw 2.4cqw; border-bottom: 1px solid rgb(255 255 255 / 0.08); text-align: right; white-space: nowrap; }
  .insert__leader-table tbody td:first-child { padding-left: 0; color: rgb(255 255 255 / 0.5); text-align: left; }
  .insert__leader-table tbody th { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 400; text-align: left; }
  .insert__leader-table tbody tr:first-child th { font-weight: 800; }
  .insert__leader-table .is-ranked { color: var(--cheddar, #f5c84b); font-weight: 800; }
  /* Its trophy case (trophy_pages): a trophy alone large, or the card's trophies as tiles, each with its count, its
     name, and who won it most; every winner on the back by player, his years after him, close set so a card holds
     about TROPHY_PAGE_ROWS of them. */
  .insert__award { display: grid; justify-items: center; gap: 2cqw; }
  .insert__award-icon { width: 30cqw; height: auto; aspect-ratio: 3 / 4; }
  .insert__award b { font: 900 max(18cqw, 26px)/1 var(--label-font); color: var(--cheddar, #f5c84b); }
  .insert__award span { font: 800 max(5.6cqw, 12px)/1.15 var(--label-font); text-transform: uppercase; text-align: center; }
  .insert__award-tiles { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 2.4cqw; width: 100%; margin: 0; padding: 0; list-style: none; }
  .insert__award-tiles li { display: grid; justify-items: center; gap: 1cqw; padding: 3cqw 1.6cqw; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 3cqw; text-align: center; }
  .insert__award-tiles .trophy-icon { width: calc(36cqw / var(--columns)); height: auto; aspect-ratio: 3 / 4; }
  .insert__award-tiles b { font: 900 max(7cqw, 13px)/1 var(--label-font); color: var(--cheddar, #f5c84b); }
  .insert__award-tiles span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 max(3.6cqw, 0.625rem)/1.1 var(--label-font); text-transform: uppercase; }
  .insert__award-tiles small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(3.4cqw, 0.625rem); color: rgb(255 255 255 / 0.65); }
  .insert--franchise_trophies .insert__subheading--count:not(:first-child) { margin-top: 3cqw; }
  .insert__award-winners { display: grid; gap: 0.6cqw; margin: 0; padding: 0; list-style: none; font-size: max(3.6cqw, 0.625rem); }
  .insert__award-winners li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 2cqw; padding-bottom: 0.6cqw; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
  .insert__award-winners span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insert__award-winners b { font: 900 max(3.4cqw, 0.625rem)/1 var(--label-font); color: var(--cheddar, #f5c84b); }
  .insert__award-winners small { grid-column: 3; color: rgb(255 255 255 / 0.65); white-space: nowrap; }
  .insert__award-winners--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4cqw; }
  .insert__award-winners--columns li { grid-template-columns: minmax(0, 1fr) auto; }
  .insert__award-winners--columns small { display: none; }
  /* The franchise's and a club season's cards in the vintage edition (seasons before 2005-06): ink and red for the
     modern white and gold. */
  [data-edition="vintage"] .insert :is(.insert__leader b, .insert__award b, .insert__award-tiles b, .insert__award-winners b, .insert__leader-table .is-ranked, .insert__list--numbers b) { color: #9b2a22; }
  [data-edition="vintage"] .insert :is(.insert__leader small, .insert__leader-sides dt, .insert__leader-table thead th, .insert__leader-table tbody td:first-child, .insert__award-tiles small, .insert__award-winners small, .insert__list--eras small, .insert__leaders em) { color: rgb(42 33 24 / 0.65); }
  [data-edition="vintage"] .insert :is(.insert__leader-sides div, .insert__leader-table tbody :is(th, td), .insert__award-tiles li, .insert__award-winners li) { border-color: rgb(70 45 20 / 0.2); }
  [data-edition="vintage"] .insert__leader-portrait { box-shadow: 0 0 0 1.2cqw #9b2a22; background: rgb(70 45 20 / 0.08); }
  [data-edition="vintage"] .insert__seasons li { background: rgb(70 45 20 / 0.08); }
  [data-edition="vintage"] .insert .insert__subheading--count small { background: rgb(70 45 20 / 0.1); color: #2a2118; }
}