/* 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; }
  .insert__lineup { display: grid; gap: 5cqw; width: 100%; }
  .insert__line-row { display: flex; justify-content: center; gap: 3cqw; margin: 0; padding: 0; list-style: none; }
  .insert__line-row li { width: 26cqw; }
  .insert__line-row a { display: grid; justify-items: center; gap: 1.4cqw; text-decoration: none; }
  .insert__line-headshot { width: 24cqw; 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(4.6cqw, 0.6875rem)/1 var(--label-font); text-transform: uppercase; }
  .insert__line-row li.is-him span { color: var(--cheddar, #f5c84b); }
  [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' back: rows a little tighter than other lists so five of each list fit. */
  .insert--rivals .insert__face--back .insert__body { gap: 0; }
  .insert--rivals .insert__subheading { margin: 3cqw 0 1.2cqw; }
  .insert--rivals .insert__subheading:first-child { margin-top: 0.4cqw; }
  .insert--rivals .insert__list { gap: 1.4cqw; font-size: max(4.8cqw, 0.6875rem); }
  .insert--rivals .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; }

  [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; }
}