/* Toto Super App — team page ([toto-team]) */

.tp{
  --tp-form-up: #4FAF7C;
  --tp-form-down: #D4625A;
  --tp-form-label: #10161A;
  --tp-mark: .14;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--tsa-font-sans);
  color: var(--tsa-body);
}

/* Green and red are too light on a light background; the label in the bar
   therefore flips too to stay readable */
:root[data-theme="light"] .tp{
  --tp-form-up: #2C7D51;
  --tp-form-down: #B23B32;
  --tp-form-label: #FFFFFF;
  --tp-mark: .20;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .tp{
    --tp-form-up: #2C7D51;
    --tp-form-down: #B23B32;
    --tp-form-label: #FFFFFF;
    --tp-mark: .20;
  }
}

/* ─── Hero ─── */

.tp-hero{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 20px;
}

/* With a watermark the logo sits outside the flow: the text column gets the full
   width instead of the leftover corner beside a round badge */
.tp-hero-mark{
  display: block;
}

.tp-hero::before{
  background: linear-gradient(90deg, var(--tp-team), transparent);
}

.tp-hero-watermark{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--tsa-radius);
  pointer-events: none;
  z-index: 0;
}

.tp-hero-watermark span{
  position: absolute;
  right: -40px;
  bottom: -46px;
  width: 250px;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--tp-mark);
  transform: rotate(-18deg);
  -webkit-mask-image: radial-gradient(150% 150% at 100% 100%, #000 40%, transparent 80%);
          mask-image: radial-gradient(150% 150% at 100% 100%, #000 40%, transparent 80%);
}

/* Badge for teams without a logo: an initial as watermark reads as a smudge */
.tp-hero-logo{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tp-team) 14%, var(--tsa-card));
  border: 2px solid color-mix(in srgb, var(--tp-team) 55%, transparent);
  overflow: hidden;
}

.tp-hero-initial{
  font-family: var(--tsa-font-mono);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--tsa-team-ink, var(--tp-team));
}

.tp-hero-main{
  position: relative;
  z-index: 1;
  min-width: 0;
}

.tp-hero-name{
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--tsa-ink);
}

.tp-hero-manager{
  margin: 4px 0 0;
  font-family: var(--tsa-font-mono);
  font-size: .85rem;
  color: var(--tsa-muted);
}

/* Only visible for a team that once played under another name */
.tp-hero-former{
  margin: 4px 0 0;
  font-size: .8rem;
  font-style: italic;
  color: var(--tsa-muted);
}

.tp-hero-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Value is mono, label is sans: centred boxes push their baselines apart, so this
   pill aligns on the baseline with an equal line height. The background mixes into
   the card colour instead of going transparent: on the translucent variant of
   .tsa-pill the hero watermark would show through */
.tp-pill{
  align-items: baseline;
  background: color-mix(in srgb, var(--tsa-ink) 6%, var(--tsa-card));
  gap: 6px;
  padding: 5px 12px;
  font-size: .78rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--tsa-body);
}

.tp-pill-val,
.tp-pill-label{
  line-height: 1.3;
}

.tp-pill-val{
  font-family: var(--tsa-font-mono);
  font-weight: 700;
  color: var(--tsa-ink);
}

.tp-pill-current{
  border-color: color-mix(in srgb, var(--tp-team) 55%, transparent);
  background: color-mix(in srgb, var(--tp-team) 12%, var(--tsa-card));
}

.tp-pill-current .tp-pill-val{
  color: var(--tsa-team-ink, var(--tp-team));
}

.tp-pill-gold{
  border-color: color-mix(in srgb, var(--tsa-gold) 50%, transparent);
}

.tp-pill-gold .tp-pill-val{
  color: var(--tsa-gold);
}

/* Pills that link through to the page their number comes from. Themes underline
   content links aggressively and colour them on hover with their own link colour,
   which makes the label unreadable; both are pinned here */
.tp .tp-pill[href],
.tp .tp-pill[href]:hover,
.tp .tp-pill[href]:focus,
.tp .tp-pill[href]:active,
.tp .tp-pill[href]:visited{
  color: var(--tsa-body);
  text-decoration: none !important;
}

.tp .tp-pill[href]{
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.tp .tp-pill[href]:focus-visible{
  outline: 2px solid var(--tsa-team-ink, var(--tp-team));
  outline-offset: 2px;
}

/* ─── Sections ─── */

.tp-section{
  padding: 18px 20px 20px;
}

.tp-section-title{
  margin: 0 0 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tsa-muted);
}

.tp-section .tsa-empty{
  padding: 8px 0;
  text-align: left;
}

.tp-section-tag{
  margin-left: 6px;
  font-family: var(--tsa-font-mono);
  letter-spacing: .04em;
  color: var(--tsa-team-ink, var(--tp-team));
}

/* ─── Huidig seizoen ─── */

.tp-now-meta{
  margin: -8px 0 12px;
  font-family: var(--tsa-font-mono);
  font-size: .74rem;
  color: var(--tsa-muted);
}

/* The badges keep their own minimum; the chart gets double the weight and drops to
   a line of its own once those three no longer fit side by side */
.tp-now-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-now-row .tp-stat{
  flex: 1 1 112px;
}

.tp-now-spark{
  flex: 2 1 220px;
  gap: 6px;
}

.tp-now-spark-line{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 58px;
}

.tp-spark-now{
  max-width: none;
}

.tp-now-form{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--tsa-border);
}

.tp-now-sub{
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tsa-muted);
}

/* ─── Vorm ─── */

.tp-form{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tp-form-item{
  --tp-form-tone: var(--tp-form-up);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tp-form-track{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 52px;
  height: 72px;
  border-radius: var(--tsa-radius-sm);
  background: color-mix(in srgb, var(--tsa-ink) 5%, transparent);
  overflow: hidden;
}

/* The lower bound keeps the points label readable at a low week score */
.tp-form-bar{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 26px;
  padding-bottom: 6px;
  border-radius: var(--tsa-radius-sm);
  background: var(--tp-form-tone);
}

.tp-form-pts{
  font-family: var(--tsa-font-mono);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tp-form-label);
  font-variant-numeric: tabular-nums;
}

.tp-form-round{
  font-family: var(--tsa-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--tsa-muted);
}

/* Above the round average */
.tp-form-high{
  --tp-form-tone: var(--tp-form-up);
}

/* Below the round average */
.tp-form-low{
  --tp-form-tone: var(--tp-form-down);
}

.screen-reader-text{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Records ─── */

.tp-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.tp-stat{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--tsa-border);
  border-radius: var(--tsa-radius-sm);
  background: color-mix(in srgb, var(--tsa-ink) 3%, transparent);
}

.tp-stat-val{
  font-family: var(--tsa-font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tsa-ink);
  font-variant-numeric: tabular-nums;
}

.tp-stat-unit{
  margin-left: 3px;
  font-size: .62em;
  font-weight: 600;
  color: var(--tsa-muted);
}

.tp-stat-label{
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--tsa-muted);
}

.tp-stat-sub{
  margin-top: 2px;
  font-family: var(--tsa-font-mono);
  font-size: .7rem;
  color: var(--tsa-team-ink, var(--tp-team));
}

/* ─── Erelijst ─── */

.tp-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tp-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tsa-gold) 45%, transparent);
  background: color-mix(in srgb, var(--tsa-gold) 10%, transparent);
  font-family: var(--tsa-font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--tsa-gold);
}

.tp-chip-icon{
  font-size: .78rem;
}

/* ─── Season by season ─── */

.tp-seasons{
  display: flex;
  flex-direction: column;
}

/* The sparkline takes the free width; the last column always holds a name, the
   current one upright or the one the season was played under in italics. Every
   row is its own grid, hence fixed widths for everything but the sparkline, or
   the columns would not line up from row to row. */
.tp-season{
  display: grid;
  grid-template-columns: 26px 34px minmax(0, 1fr) 76px 150px;
  align-items: center;
  gap: 2px 14px;
  padding: 11px 0;
  border-top: 1px solid var(--tsa-border);
  text-decoration: none;
  color: inherit;
}

.tp-season:first-child{
  border-top: 0;
}

.tp-season-label{
  font-family: var(--tsa-font-mono);
  font-size: .85rem;
  font-weight: 600;
  color: var(--tsa-ink);
}

.tp-season-name{
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--tsa-font-sans);
  font-size: .72rem;
  line-height: 1.2;
  color: var(--tsa-muted);
}

/* A former name: italic, a touch smaller, so it reads as "then" next to the
   upright current name */
.tp-season-as{
  font-size: .7rem;
  font-style: italic;
}

/* Number and trophy share the same column, so both are centred in it: the number
   fills the column and centres its text, the coin centres itself as a grid item
   at its own width */
.tp-season-rank{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tsa-font-mono);
  font-size: .9rem;
  font-weight: 700;
  color: var(--tsa-muted);
  font-variant-numeric: tabular-nums;
}

/* Place 1 swaps its number for a trophy in a gold coin */
.tp-season-trophy{
  justify-self: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--tsa-gold);
  background: color-mix(in srgb, var(--tsa-gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tsa-gold) 45%, transparent);
}

.tp-trophy-svg{
  display: block;
  width: 15px;
  height: 15px;
}

.tp-season-spark-wrap{
  min-width: 0;
  display: flex;
  align-items: center;
}

.tp-spark{
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  opacity: .85;
}

/* The line keeps the team colour; a team colour that does not read on the
   card gets a rim in its ink underneath it, transparent for all others. */
.tsa-team-ink .tp-spark-casing{
  stroke: var(--tsa-team-casing);
}

/* Season rows fill their column; the line stretches along via preserveAspectRatio="none" */
.tp-season-spark-wrap .tp-spark{
  max-width: 100%;
  height: 40px;
}

/* Seasons without round data keep the column occupied so the rows stay aligned */
.tp-season-nodata{
  display: block;
  width: 100%;
  max-width: 100%;
  border-top: 1px dashed var(--tsa-border);
}

.tp-season-score{
  justify-self: start;
  padding: 3px 10px;
  font-family: var(--tsa-font-mono);
  font-size: .78rem;
}

@media (hover: hover) and (pointer: fine){
  /* Just enough difference to feel like a button, without touching the label's
     contrast. All values come from the theme tokens, so this works the same in
     dark and light */
  .tp .tp-pill[href]:hover{
    background: color-mix(in srgb, var(--tsa-ink) 10%, transparent);
    border-color: color-mix(in srgb, var(--tsa-ink) 22%, transparent);
  }
  .tp .tp-pill-current[href]:hover{
    background: color-mix(in srgb, var(--tp-team) 17%, var(--tsa-card));
    border-color: color-mix(in srgb, var(--tp-team) 68%, transparent);
  }
  .tp .tp-pill-gold[href]:hover{
    background: color-mix(in srgb, var(--tsa-gold) 8%, var(--tsa-card));
    border-color: color-mix(in srgb, var(--tsa-gold) 62%, transparent);
  }
  .tp-season-link:hover .tp-season-label{
    color: var(--tsa-team-ink, var(--tp-team));
  }
  .tp-season-link:hover .tp-spark{
    opacity: 1;
  }
}

@media (max-width: 600px){
  .tp-hero{
    gap: 14px;
    padding: 18px 16px;
  }
  .tp-hero-logo{
    width: 58px;
    height: 58px;
  }
  .tp-hero-watermark span{
    right: -30px;
    bottom: -34px;
    width: 190px;
    height: 190px;
  }
  .tp-section{
    padding: 16px;
  }
  .tp-season{
    grid-template-columns: 26px 32px minmax(0, 1fr) 76px 120px;
    gap: 2px 10px;
  }
  .tp-season-trophy{
    width: 24px;
    height: 24px;
  }
  .tp-form{
    gap: 5px;
  }
  .tp-form-track{
    height: 62px;
  }
  .tp-form-pts{
    font-size: .8rem;
  }
  .tp-stats{
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }
  .tp-stat{
    padding: 10px 12px;
  }
  .tp-stat-val{
    font-size: 1.15rem;
  }
}

/* ─── Team index (/team/ without team) ─── */

.tp-index-page{
  gap: 26px;
}

.tp-index-group .tp-section-title{
  margin-bottom: 12px;
}

.tp-index{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  font-family: var(--tsa-font-sans);
}

.tp-index-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}

.tp-index-card::before{
  background: linear-gradient(90deg, var(--tp-team), transparent);
}

@media (hover: hover) and (pointer: fine){
  .tp-index-card:hover{
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tp-team) 50%, var(--tsa-border));
  }
}

.tp-index-logo{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tp-team) 14%, var(--tsa-card));
  overflow: hidden;
}

.tp-index-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.tp-index-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tp-index-name{
  font-size: .95rem;
  font-weight: 700;
  color: var(--tsa-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-index-manager{
  font-family: var(--tsa-font-mono);
  font-size: .74rem;
  color: var(--tsa-muted);
}

.tp-index-titles{
  margin-left: auto;
  font-family: var(--tsa-font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--tsa-gold);
  white-space: nowrap;
}

/* No room beside the score on a phone: the current name only repeats the page
   title and goes, a former name gets its own line below the row */
@media (max-width: 480px){
  .tp-season{
    grid-template-columns: 26px 32px minmax(0, 1fr) 76px;
  }
  .tp-season-name{
    display: none;
  }
  .tp-season-as{
    display: block;
    grid-column: 1 / -1;
    white-space: normal;
  }
}