/* ==========================================================================
   MOD · HISTORY — league history & dynasty record.
   Every selector is scoped under .hist / .hist-*. Nothing global is touched.
   Tokens come from :root in styles.css.
   ========================================================================== */

.hist{ position:relative }

/* ------------------------------------------------------------ shared bits */

.hist-kicker{
  font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--turf); margin-bottom:2px;
}
.hist-sub1{
  font-family:var(--disp); font-size:14px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:24px 0 13px; display:flex; align-items:center; gap:12px;
}
/* :first-child, not :first-of-type — the kicker above is also a div, so
   :first-of-type would never match the Champions heading. */
.hist > .hist-sub1:first-child{ margin-top:0 }
.hist-sub1::after{ content:""; flex:1; height:1px; background:var(--line) }

.hist-warn{
  font-size:12.5px; color:var(--muted); line-height:1.6; margin:12px 0 0;
  border-left:2px solid rgba(232,84,79,.45); padding:2px 0 2px 12px;
}
.hist-empty{
  color:var(--faint); font-size:13.5px; padding:30px 22px; text-align:center; line-height:1.7;
  background:var(--panel); border:1px dashed var(--line2); border-radius:var(--r-sm);
}
.hist-err{ color:var(--red); font-size:12.5px }
.hist-legend{
  font-size:11.5px; color:var(--faint); line-height:1.65; margin-top:12px; max-width:82ch;
}

/* Team crest — sized on the element itself so it is bounded wherever it lands.
   Owners upload logos up to 1170x675. */
.hist-crest{
  width:34px; height:34px; flex:0 0 34px; border-radius:9px; object-fit:cover;
  background:var(--raise); display:block; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.hist-crest.ph{
  display:grid; place-items:center; font-family:var(--disp); font-size:13px;
  color:var(--muted); letter-spacing:.02em;
}

/* --------------------------------------------------------- champions row */

/* auto-fill, not auto-fit: a league with a single loaded season keeps a
   plate-sized card instead of one stretched across the whole row. */
.hist-champs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:var(--sp-3);
  align-items:start;
}

.hist-plate{
  --lift:0px;
  position:relative; overflow:hidden; min-width:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel2),var(--panel) 78%);
  padding:15px 15px 14px;
  box-shadow:0 14px 34px -22px rgba(0,0,0,.95);
  transform:translateY(var(--lift));
}
/* engraved yard lines across the plate face */
.hist-plate::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,255,255,.035) 34px 35px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
/* hairline of light along the top bevel */
.hist-plate::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.hist-plate > *{ position:relative }

.hist-plate.reign{
  border-color:rgba(255,210,30,.46);
  background:
    linear-gradient(180deg,rgba(255,210,30,.13),rgba(255,210,30,.02) 46%,var(--panel) 82%);
  box-shadow:0 0 0 1px rgba(255,210,30,.1), 0 20px 44px -22px rgba(255,210,30,.42);
}
.hist-plate.reign::after{ background:linear-gradient(90deg,transparent,rgba(255,210,30,.75),transparent) }

.hist-flag{
  display:inline-flex; align-items:center; margin-bottom:9px;
  background:var(--yellow); color:#141a15;
  font-size:9.5px; font-weight:800; letter-spacing:.17em; text-transform:uppercase;
  padding:3px 15px 3px 9px; border-radius:3px 0 0 3px; line-height:1.5;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%);
}

.hist-ptop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.hist-year{
  font-family:var(--disp); font-size:38px; line-height:.86; letter-spacing:.012em;
  color:var(--faint);
}
.hist-plate.reign .hist-year{ color:var(--yellow); text-shadow:0 0 26px rgba(255,210,30,.34) }
.hist-tw{ color:var(--raise); flex-shrink:0; margin-top:2px }
.hist-plate.reign .hist-tw{ color:var(--yellow); filter:drop-shadow(0 0 9px rgba(255,210,30,.5)) }
.hist-tr{ width:17px; height:17px; display:block }

.hist-pteam{ display:flex; align-items:center; gap:10px; margin-top:13px; min-width:0 }
.hist-pnames{ min-width:0 }
.hist-pname{
  font-weight:700; font-size:14px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist-pname.hist-tbd{ color:var(--faint); margin-top:13px }
.hist-powner{
  font-size:11.5px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist-pstat{
  display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:12px;
  font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums;
}
.hist-pstat b{ color:var(--chalk); font-weight:700; font-size:13px }
.hist-pmeta{
  margin-top:11px; padding-top:9px; border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------------------------------------------------------- all-time table */

.hist-tblwrap{
  overflow-x:auto; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh-2);
  scrollbar-width:thin; scrollbar-color:var(--raise) transparent;
}
.hist-tblwrap::-webkit-scrollbar{ height:9px }
.hist-tblwrap::-webkit-scrollbar-thumb{ background:var(--raise); border-radius:99px }
.hist-tblwrap::-webkit-scrollbar-track{ background:transparent }

.hist-tbl{
  width:100%; border-collapse:collapse; min-width:820px;
  font-variant-numeric:tabular-nums;
}
.hist-tbl thead th{
  padding:0; border-bottom:1px solid var(--line2); white-space:nowrap;
  position:sticky; top:0; z-index:2; background:var(--panel); text-align:left;
}
.hist-th{
  display:flex; align-items:center; gap:4px; width:100%;
  padding:12px 12px; font-family:var(--body);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); background:none; border:none; cursor:pointer; text-align:left;
  transition:color .15s;
}
.hist-th.static{ cursor:default }
.hist-th:hover{ color:var(--chalk) }
.hist-th.on{ color:var(--chalk) }
.hist-th:focus-visible{ outline:2px solid var(--yellow); outline-offset:-3px; border-radius:4px }
.hist-ar{ font-size:9px; opacity:.4 }
.hist-th.on .hist-ar{ opacity:1; color:var(--yellow) }
.hist-tbl th.hist-num .hist-th{ justify-content:flex-end }
.hist-tbl th.hist-c-x .hist-th{ justify-content:center }

.hist-tbl tbody td{ padding:11px 12px; font-size:14px; white-space:nowrap; vertical-align:middle }
.hist-tbl td.hist-num{ text-align:right }
.hist-row{ border-bottom:1px solid rgba(255,255,255,.045); cursor:pointer; transition:background .14s }
.hist-row:hover{ background:var(--panel2) }
.hist-row.open{ background:var(--panel2) }
.hist-row.lead td:first-child{ box-shadow:inset 3px 0 0 var(--yellow) }

.hist-c-rk{ width:44px }
.hist-rk{ font-family:var(--disp); font-size:19px; color:var(--faint) }
.hist-row.lead .hist-rk{ color:var(--yellow) }

.hist-c-ow{ min-width:190px }
.hist-own{ display:flex; flex-direction:column; min-width:0 }
.hist-onm{ font-weight:650; overflow:hidden; text-overflow:ellipsis; max-width:230px }
.hist-osp{ font-size:11px; color:var(--faint); letter-spacing:.04em }

.hist-c-tt{ width:96px }
.hist-pips{ display:inline-flex; align-items:center; gap:5px }
.hist-pip{
  width:11px; height:11px; border-radius:50%; flex:0 0 11px;
  border:1.6px solid var(--line2); background:transparent; display:block;
}
.hist-pip.on{
  border-color:var(--yellow);
  background:radial-gradient(circle at 50% 50%,var(--yellow) 0 45%,transparent 47%);
  box-shadow:0 0 9px rgba(255,210,30,.45);
}
.hist-pipn{ font-size:11px; font-weight:700; color:var(--yellow); margin-left:2px }

.hist-rec{ font-weight:650 }
.hist-pct{ display:block; font-weight:650 }
.hist-bar{
  display:block; height:4px; border-radius:3px; background:var(--raise);
  overflow:hidden; margin-top:5px; min-width:62px;
}
.hist-bar i{
  display:block; height:100%; width:100%; border-radius:3px; transform-origin:left center;
  background:linear-gradient(90deg,var(--turf2),var(--turf));
}

.hist-fin{
  display:inline-block; font-style:normal; font-size:11.5px; font-weight:700;
  padding:2px 8px; border-radius:99px; letter-spacing:.03em;
  background:var(--raise); color:var(--muted);
}
.hist-fin.gold{ background:rgba(255,210,30,.16); color:var(--yellow) }
.hist-fin.good{ background:rgba(49,173,109,.16); color:var(--turf-ink) }
.hist-fin.bad{ background:rgba(232,84,79,.15); color:var(--red-ink) }

.hist-c-x{ width:46px; text-align:center }
.hist-x{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  color:var(--faint); background:none; border:1px solid transparent; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.hist-x:hover{ color:var(--chalk); border-color:var(--line2) }
.hist-x:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }
.hist-chev{ display:block; font-size:11px; line-height:1; transition:transform .2s ease }
.hist-row.open .hist-chev{ transform:rotate(180deg) }
.hist-row.open .hist-x{ color:var(--yellow) }

/* ---------------------------------------------- per-owner season-by-season */

/* `tr` and `[hidden]` both live in the UA sheet; state it here so the collapse
   never depends on which one wins. */
.hist-subrow[hidden]{ display:none }
.hist-subrow > td{ padding:0 !important; background:rgba(0,0,0,.22); border-bottom:1px solid var(--line) }
/* Open/closed is `display`, never a transitioned opacity: if frames are
   throttled the transition never advances and the panel would sit invisible
   while still occupying the row. Correctness over the fade. */
.hist-drop{
  display:none;
  padding:4px 14px 14px 46px; white-space:normal;
}
.hist-drop.on{ display:block }
.hist-dhd{
  font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); padding:10px 0 2px;
}
.hist-yr{
  display:grid; grid-template-columns:54px minmax(150px,1fr) 78px 86px 108px;
  gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line);
  font-size:13px;
}
.hist-yn{ font-family:var(--disp); font-size:17px; color:var(--muted); line-height:1 }
.hist-yt{
  font-weight:620; color:var(--chalk); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist-mate{
  font-style:normal; color:var(--faint); font-weight:500; font-size:11.5px; margin-left:8px;
}
.hist-yr2{ color:var(--muted); font-weight:650 }
.hist-yp{ color:var(--muted); text-align:right }
.hist-yf{ display:flex; align-items:center; gap:7px; justify-content:flex-end }
.hist-yf em{ font-style:normal; font-size:11px; color:var(--faint) }

/* ------------------------------------------------------------ dynasty tiles */

.hist-dyn{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3) }
.hist-tile{
  position:relative; overflow:hidden; min-width:0;
  background:linear-gradient(180deg,var(--panel2),var(--panel) 84%);
  border:1px solid var(--line); border-radius:var(--r); padding:16px 17px 15px;
}
.hist-tile::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--faint);
}
.hist-tile.gold::before{ background:var(--yellow); box-shadow:0 0 20px rgba(255,210,30,.5) }
.hist-tile.turf::before{ background:var(--turf); box-shadow:0 0 20px rgba(49,173,109,.45) }
.hist-tile.ice::before{ background:var(--ice,#57b6e8); box-shadow:0 0 20px rgba(87,182,232,.4) }
.hist-tl{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.hist-tv{
  font-family:var(--disp); font-size:34px; line-height:1; margin:10px 0 8px;
  display:flex; align-items:baseline; gap:8px;
}
.hist-tv em{
  font-family:var(--body); font-style:normal; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
}
.hist-tile.gold .hist-tv{ color:var(--yellow) }
.hist-tile.turf .hist-tv{ color:var(--turf-ink) }
.hist-tile.ice .hist-tv{ color:var(--ice,#57b6e8) }
.hist-tw2{
  font-size:13.5px; font-weight:650; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist-tn{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5 }

/* ----------------------------------------------------------------- loading */

.hist-sk{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%; animation:hist-sweep 1.4s ease-in-out infinite;
}
.hist-sk-plate{ height:158px; border-radius:var(--r) }
.hist-sk-row{ height:48px }
.hist-sklist{ display:grid; gap:8px }
@keyframes hist-sweep{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------------------------------------------------------------- entrance
   Pure CSS: `backwards` fill holds the from-state through the stagger delay,
   then each card settles into its normal computed style. No class is toggled
   from script, so the section can never be left stranded at opacity 0. */

.hist-plate{
  animation:hist-rise .58s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 62ms);
}
.hist-tile{
  animation:hist-rise-flat .5s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 62ms);
}
@keyframes hist-rise{
  from{ opacity:0; transform:translateY(calc(var(--lift) + 14px)) }
}
@keyframes hist-rise-flat{
  from{ opacity:0; transform:translateY(12px) }
}

/* ------------------------------------------------------------- responsive */

@media(min-width:781px){
  .hist-plate.reign{ --lift:-6px }
}

@media(max-width:780px){
  .hist-dyn{ grid-template-columns:1fr }
  .hist-tile{ padding:14px 16px 13px }
  .hist-tv{ font-size:30px }
}

@media(max-width:640px){
  .hist-sub1{ margin:24px 0 11px }

  /* A snap rail beats five stacked plates on a phone. */
  .hist-champs{
    display:flex; gap:10px; overflow-x:auto; padding-bottom:8px;
    scroll-snap-type:x mandatory; scrollbar-width:thin;
    scrollbar-color:var(--raise) transparent; -webkit-overflow-scrolling:touch;
  }
  .hist-champs::-webkit-scrollbar{ height:7px }
  .hist-champs::-webkit-scrollbar-thumb{ background:var(--raise); border-radius:99px }
  .hist-plate{ flex:0 0 78%; max-width:270px; scroll-snap-align:start }
  .hist-sk-plate{ flex:0 0 78%; max-width:270px; height:150px }
  .hist-year{ font-size:33px }

  .hist-drop{ padding-left:14px }
  .hist-yr{ grid-template-columns:46px minmax(120px,1fr) 70px 78px 98px; font-size:12.5px }
  .hist-mate{ display:block; margin-left:0 }
}

@media(max-width:400px){
  .hist-plate{ flex-basis:86%; padding:13px 13px 12px }
  .hist-tv{ font-size:27px }
  .hist-tblwrap{ border-radius:var(--r-sm) }
}

@media(prefers-reduced-motion:reduce){
  .hist-plate, .hist-tile, .hist-sk{ animation:none }
  .hist-chev, .hist-row, .hist-x, .hist-th{ transition:none }
  .hist-sk{ background:var(--panel2) }
}