/* 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; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
  .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); }
  .inserts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--space-4); }
  @media (max-width: 640px) { .inserts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }

  .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, 8px)/1.1 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cheddar, #f5c84b); }
  .insert__number { font: 600 max(4cqw, 8px)/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; }
  .insert__footer { display: flex; justify-content: center; }
  .insert__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 max(4cqw, 8px)/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, 10px); color: rgb(255 255 255 / 0.8); }
  .insert__note { margin: auto 0 0; font-size: max(4.4cqw, 8px); 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, 9px); color: rgb(255 255 255 / 0.7); }
  .insert__big--attribute b { font-size: max(34cqw, 44px); color: #fff; }
  .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; }
  .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 { width: 58cqw; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--cheddar, #f5c84b); background: rgb(255 255 255 / 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, 7px)/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, 9px); }
  .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, 7px)/1.1 var(--label-font); letter-spacing: 0.1em; color: rgb(255 255 255 / 0.6); }
  .insert__tile small { font-size: max(3.6cqw, 7px); 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; }
  .insert__tiles--rows .insert__tile span { font-size: max(4.6cqw, 9px); 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, 8px)/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, 10px); }
  .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, 9px)/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 holds four short lists: rows a little tighter than other lists so two of each 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, 9px); }
  .insert--rivals .insert__list li { padding-bottom: 1.4cqw; line-height: 1.25; }
  .insert__meters { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.4cqw; font-size: max(4.8cqw, 9px); }
  .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; }
  .trophy-icon--outline { filter: none; }
  .trophy-icon--outline > * { fill: none; stroke: rgb(255 255 255 / 0.7); stroke-width: 0.9px; stroke-dasharray: 3px 2.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .trophy-icon--inline.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 > * { stroke: rgb(70 45 20 / 0.55); }

  /* 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; }
}