/* ═══════════════════════════════════════════════════════════════════════════
   Draft Helper — sidebar skin
   ───────────────────────────────────────────────────────────────────────────
   Layout-only re-skin, loaded AFTER styles.css so it wins on equal specificity.
   It moves the top nav into a left rail, turns the sub-tab rows into floating
   pill cards, adds centred page titles and a VS diamond on the draft board.

   Deliberately unchanged: the page canvas (body background gradient) and the
   type stack. Every colour here is the gold already used by the nav
   (--tab-accent), so nothing new enters the palette.

   Structural contract with index.html: header holds .side-brand + nav.tabs, and
   every section/footer lives inside <main class="site-main">.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --rail-w: 306px;
  /* Same triplet as --tab-accent; aliased so the rail keeps its own gold even
     if the nav accent is ever re-tinted. */
  --rail-accent: 242, 207, 120;
}

/* ─── Shell: rail | content ─────────────────────────────────────────────── */
body {
  flex-direction: row;
  align-items: stretch;
}

.site-main {
  flex: 1 1 auto;
  min-width: 0;              /* lets wide tables scroll instead of stretching */
  display: flex;
  flex-direction: column;
  /* No min-height: 100vh here. This element carries the site-wide zoom (it is
     the body child now), and a zoomed element multiplies vh too — 100vh would
     resolve to 110vh and mint a permanent scrollbar. body's own min-height plus
     align-items: stretch already gives it the full screen. */
}

/* #tab-champions sets `zoom: var(--ui-zoom)` on itself. That used to REPLACE
   the `body > *` zoom (same element, higher specificity); now that the sections
   sit inside .site-main the two nest and compound to 1.21. Hand the zoom back
   to the wrapper. */
.site-main #tab-champions { zoom: 1; }

/* The rail opts OUT of the site-wide 110% zoom (body > * { zoom }). A zoomed
   element multiplies its own viewport units too, so `height: 100vh` would
   resolve to 110vh and hang past the bottom of the screen. Sizes below are
   therefore real pixels, nudged up to sit alongside the zoomed content. */
header {
  zoom: 1;
  position: sticky;
  top: 0;
  z-index: 60;
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  height: 100vh;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 24px 0 18px;
  background: linear-gradient(180deg, #0b1119 0%, #080b12 60%, #06080d 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  border-bottom: none;
  box-shadow: 8px 0 30px rgba(0, 0, 0, .45);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─── Brand ─────────────────────────────────────────────────────────────── */
.side-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 3px 16px 26px;
  text-decoration: none;
  user-select: none;
}
.side-brand-mark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #5a3d22 0%, #33200f 68%, #1a1008 100%);
  border: 1px solid rgba(var(--rail-accent), .40);
  box-shadow: 0 0 0 4px rgba(var(--rail-accent), .055), 0 8px 22px rgba(0, 0, 0, .6);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.side-brand:hover .side-brand-mark {
  border-color: rgba(var(--rail-accent), .7);
  box-shadow: 0 0 0 4px rgba(var(--rail-accent), .10), 0 8px 26px rgba(0, 0, 0, .65);
}
.side-brand-mark img { width: 84%; height: 84%; object-fit: contain; display: block; }

/* Two spans rather than a <br>: the rail stacks them, the narrow top-bar lays
   them out on one line with a real word gap. */
.side-brand-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  /* Same gold gradient as .tab .tab-text, so brand and nav read as one family. */
  background: linear-gradient(180deg, #fff6d8 0%, #f2c962 58%, #d9a63f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ─── Nav rows ──────────────────────────────────────────────────────────── */
header nav.tabs {
  /* Not flex:1 any more. A stretching nav pushed #dhRefreshApp (its sibling)
     onto the bottom edge of the rail; sized to its content, the nav ends right
     after the last row so the flags + refresh follow it directly. */
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
  width: 100%;
  padding: 0 14px;
}

header .tab {
  width: 100%;
  height: auto;
  min-height: 68px;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 17px;
  border-radius: 13px;
  /* Chakra Petch instead of the Cinzel the top nav used: squared-off and
     technical, so the rail labels no longer read as the same serif voice as
     the brand mark right above them. Already loaded for the league label. */
  font-family: 'Chakra Petch', var(--font);
  font-size: 15.5px;
  letter-spacing: .05em;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
header .tab .tab-text { flex: 1 1 auto; }

/* The mascot is the brand block now, so the first tab drops its inline copy. */
header .tab .tab-emblem { display: none; }

/* Icon rail. Each tab paints its glyph by masking the gold gradient with an
   inline SVG, so one colour rule covers hover/active for every icon. */
header .tab::before {
  content: '';
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  background: linear-gradient(180deg, #fbdc8c 0%, #dcac45 100%);
  opacity: .62;
  transition: opacity .2s ease;
  -webkit-mask: var(--tab-ico) center / contain no-repeat;
  mask: var(--tab-ico) center / contain no-repeat;
}
header .tab:hover::before  { opacity: .9; }
header .tab.active::before { opacity: 1; }

header .tab[data-tab="draft"] {
  --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3.3 7.5 12 12.5l8.7-5'/%3E%3Cpath d='M12 12.5V21'/%3E%3C/svg%3E");
}
header .tab[data-tab="match-history"] {
  --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.6 2.2'/%3E%3C/svg%3E");
}
header .tab[data-tab="champions"] {
  --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V11'/%3E%3Cpath d='M10 20V4'/%3E%3Cpath d='M16 20v-6'/%3E%3Cpath d='M22 20V8'/%3E%3C/svg%3E");
}
header .tab[data-tab="tags"] {
  --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.2 12.8 21a1.8 1.8 0 0 1-2.6 0l-7-7a1.8 1.8 0 0 1-.5-1.3V4.6c0-1 .8-1.8 1.8-1.8h8.1c.5 0 1 .2 1.3.5l6.7 6.7a1.8 1.8 0 0 1 0 2.6z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E");
}
header .tab[data-tab="bot"] {
  --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='11' rx='3'/%3E%3Cpath d='M12 8V4.6'/%3E%3Ccircle cx='12' cy='3.4' r='1.3'/%3E%3Cpath d='M9 13v1.4M15 13v1.4'/%3E%3Cpath d='M1.8 12v3M22.2 12v3'/%3E%3C/svg%3E");
}

/* The accent moves from a bottom underline to a left spine — the shape a
   vertical rail reads with. */
header .tab::after {
  left: 0;
  right: auto;
  top: 13px;
  bottom: 13px;
  width: 3px;
  height: auto;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg,
    rgba(var(--rail-accent), 0) 0%,
    rgba(var(--rail-accent), 1) 24%,
    rgba(var(--rail-accent), 1) 76%,
    rgba(var(--rail-accent), 0) 100%);
}

header .tab:hover {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .07);
}
header .tab.active {
  background: linear-gradient(90deg,
    rgba(var(--rail-accent), .15) 0%,
    rgba(var(--rail-accent), .045) 62%,
    transparent 100%);
  border-color: rgba(var(--rail-accent), .26);
  box-shadow: none;
}

/* ─── Rail footer: language flags, then the desktop refresh key ─────────── */
/* .lang-switch is appended into nav.tabs by i18n.js, so it is the last item of
   the (flex: 1) nav and needs no container of its own.

   The pair sits just under the last nav row — one clear gap below it, not
   floated into the middle of the rail and not pinned to the bottom edge. Both
   left AND right margins must be auto to centre horizontally, because the base
   rule in styles.css sets only margin-left (written for a horizontal header)
   and would otherwise pin the pair to the right edge. Padding is zeroed for
   the same reason: the base rule's padding-right would knock the pair off the
   centre line. */
header .lang-switch {
  margin: 30px auto 0;
  justify-content: center;
  gap: 12px;
  padding: 0;
}
/* Sized up with the nav text — at the old 20px the flags read as leftover chrome
   next to 14.5px rows. */
header .lang-btn { padding: 8px 11px; border-radius: 9px; }
header .lang-btn svg { width: 40px; height: 27px; }
header .lang-btn.active { border-color: rgba(var(--rail-accent), .45); }

/* Was pinned to the header's top-right when the header was a full-width bar; in
   a rail that corner is empty gutter, so it returns to the flow and centres
   under the flags — square rather than round, to sit with the rounded-square
   nav rows. Still desktop-only: the [hidden] / .site-public guards in
   styles.css are untouched. */
#dhRefreshApp {
  position: static;
  transform: none;
  margin: 16px auto 4px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.dh-refresh-icon { font-size: 23px; }

/* ─── Page titles ───────────────────────────────────────────────────────── */
/* Type and gold match the Stats page heading (.cw-head h2, in index.html's
   #tab-champions style block) — same inherited --font, same five-stop gradient
   with the darker amber band through the middle. Only the size differs: a
   standalone hero on an otherwise empty row carries a few px more than a
   heading sitting on top of its own table. */
.page-title {
  margin: 26px auto 22px;
  text-align: center;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.2;
  background: linear-gradient(180deg,
    #fff4cf 0%,
    #fbd877 26%,
    #eaad3e 50%,
    #b9791f 68%,
    #f4d06d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.page-title::after {
  content: '';
  display: block;
  width: 112px;
  height: 1px;
  margin: 13px auto 0;
  background: linear-gradient(90deg, transparent, rgba(var(--rail-accent), .45), transparent);
}

/* ─── Picked team name reads as a control ───────────────────────────────── */
/* Once a team is chosen the picker's own trigger is hidden and .dts-name takes
   over as the click target (mountTeamPicker in app.js). That was invisible at
   rest — cursor: pointer and a hover colour only tell you after you have
   already found it — so the name now wears the dropdown's own vocabulary
   full-time: a hairline frame and the same chevron the league and team selects
   use. Hover/focus warms it to gold, and :active nudges the affordance so the
   click registers even before the menu paints.
   Specificity matches the rule in styles.css; this file simply loads later. */
.draft-team-stats-panel.has-team .dts-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 11px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.draft-team-stats-panel.has-team .dts-name::after {
  content: '';
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: currentColor;
  opacity: .7;
  transition: opacity .15s;
  -webkit-mask: var(--dts-caret) center / contain no-repeat;
  mask: var(--dts-caret) center / contain no-repeat;
  --dts-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.draft-team-stats-panel.has-team .dts-name:hover {
  color: var(--gold);
  border-color: rgba(45, 212, 191, .55);
  background: rgba(45, 212, 191, .07);
}
.draft-team-stats-panel.has-team .dts-name:hover::after { opacity: 1; }
.draft-team-stats-panel.has-team .dts-name:active { transform: translateY(1px); }

/* The picker wrapper is a zero-height child of .dts-id now (see mountTeamPicker),
   so it inherits that block's 3px flex gap twice — once above, once below —
   where there used to be one. Pull one back so nothing shifts. */
.draft-team-stats-panel.has-team .cs-dd { margin-top: -3px; }

/* Anchor is a zero-width point under the centred name, so centre the list on it
   rather than hanging it off one edge. Overrides the red-side rule in
   styles.css, which pinned the menu to the right of the old plate-level host. */
.draft-team-stats-panel.has-team .cs-dd-menu,
.draft-side.red .draft-team-stats-panel.has-team .cs-dd-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Team list: taller before it starts scrolling. 340px cut LCK off at eight of
   its ten teams; 470 clears the whole roster plus the placeholder row in one
   view. (.cs-dd only ever wraps the two team selects — enhanceTeamSelect is its
   sole caller — so this reaches nothing else.) The bigger rosters, LPL at
   seventeen, still scroll; they just scroll less. */
.cs-dd-menu { max-height: 470px; }

/* ─── Draft Analysis: narrower boxes, same type ─────────────────────────── */
/* .draft-power-wrap's max-width is what sets the width of the two cards; its
   zoom is what sets their text size. Narrowing only the former pulls the boxes
   in without shrinking a single label — the reason this is a width change and
   not a zoom change. */
.draft-power-wrap { max-width: 760px; }

/* ─── Match History: one step larger ────────────────────────────────────── */
/* The page is capped at .mh-wrap's 880px, which left a wide empty margin either
   side once the content area stopped sharing the screen with a top nav. `zoom`
   rather than transform, so this is a real layout scale — the rows get wider
   into that spare space and the text stays crisp. It NESTS inside .site-main's
   --ui-zoom, so the page lands at 1.1 x 1.15 = 1.265: exactly 15% up on what it
   rendered before. Same trick, and the same figure, the draft board uses. */
#tab-match-history { zoom: 1.15; }

/* ─── Sub-tab rows → one dark header strip ──────────────────────────────── */
/* Still one layer, not a stack: no border box, no rounded corners, no drop
   shadow around the tabs. What reads as the header is a single dark band the
   full width of the content column — a step darker than the page canvas, so the
   strip recedes and the tabs sit on top of it — closed by one hairline along
   its bottom edge. */
.draft-subtab-bar,
.data-subtab-bar {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 13px 24px;
  gap: 5px;
  flex-wrap: wrap;
  /* Flat #0b1119 — the exact tone the rail carries at the top of the page, so
     the strip and the nav rail read as one continuous header surface across
     the corner where they meet. (Flat rather than the rail's full gradient:
     that ramp is scaled over 100vh, and compressed into a ~60px strip it would
     land visibly darker at the bottom than the rail beside it.) */
  background: #0b1119;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* position: sticky is inherited from the base rule, but it does nothing
     here: #tab-draft's `overflow-y: auto` makes that section the sticky
     scrollport, and the document scrolls instead of it. The bar therefore
     scrolls away with the page — as it did before this skin. */
  top: 0;
}

/* The one line closing the strip. Neutral now that the band itself separates
   the header from the page — a tinted line would be a second accent competing
   with the active tab. */
.draft-subtab-bar::after,
.data-subtab-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: rgba(255, 255, 255, .07);
}

/* Active tab: the reference's outlined-pill SHAPE, in the rail gold rather than
   the app's teal accent — the lettering matches the nav rows and brand mark on
   the left, so the whole header surface speaks in one colour. */
.draft-subtab { padding: 10px 24px; }
.draft-subtab.active {
  color: #f4cf7c;
  background: rgba(var(--rail-accent), .08);
  border-color: rgba(var(--rail-accent), .55);
  box-shadow: none;
}

/* ─── Draft topbar: league picker + live button as one card ─────────────── */
#tab-draft .draft-topbar {
  padding: 12px 18px;
  /* Top margin was the removed page title's job — without it the card would sit
     right under the sub-tab pills. Tightened 34/26 → 16/10 on 2026-08-20: the
     board was carrying a lot of dead vertical space above the team plates. */
  margin: 16px auto 10px;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(10, 14, 22, .74);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}
#tab-draft .draft-split-label {
  gap: 14px;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
#tab-draft .draft-league-label { color: rgba(255, 255, 255, .62); }

/* ─── Side headers: chip → dotted label, as on the reference board ──────── */
#tab-draft .draft-side-badge,
#tab-draft .draft-side-badge.blue,
#tab-draft .draft-side-badge.red {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border-color: transparent;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* The dotted marker that used to sit before "Blue side" / "Red side" was
   removed 2026-08-20 — the label's own colour already carries the side. */
#tab-draft .draft-side-badge::before { content: none; }

/* ─── Centre column of the info row ─────────────────────────────────────
   The VS diamond that used to be drawn here (::before plate + ::after "VS")
   was removed 2026-08-20: the Draft Win Rate box now occupies this column,
   between the two team plates, and the two can't share the space. */
#tab-draft .draft-divider {
  position: relative;
  overflow: visible;
  z-index: 5;
}

/* ─── Narrow screens: the rail folds back into a top bar ────────────────── */
@media (max-width: 960px) {
  body { flex-direction: column; }

  header {
    position: static;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
    overflow: visible;
  }

  .side-brand { flex-direction: row; gap: 9px; padding: 0 8px 0 0; }
  .side-brand-mark { width: 36px; height: 36px; }
  .side-brand-name {
    flex-direction: row;
    gap: .4em;
    font-size: 11px;
    letter-spacing: .16em;
    text-align: left;
  }

  /* The 0-width divider column has no room to hold a 54px diamond once the two
     team selects close up, so it drops out rather than sitting on top of them. */
  #tab-draft .draft-divider::before,
  #tab-draft .draft-divider::after { display: none; }

  header nav.tabs {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  header .tab { width: auto; min-height: 36px; padding: 8px 12px; }
  header .tab::after {
    left: 12px; right: 12px; top: auto; bottom: -1px;
    width: auto; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg,
      rgba(var(--rail-accent), 0) 0%,
      rgba(var(--rail-accent), 1) 22%,
      rgba(var(--rail-accent), 1) 78%,
      rgba(var(--rail-accent), 0) 100%);
  }
  header .lang-switch { margin: 0; padding: 0 0 0 6px; }
  #dhRefreshApp { margin: 0 0 0 6px; }
}