/* ============================================================================
   Learn page — matchup rail (220px) per design_handoff_sc2tree_ui
   Adds a grouped-by-race sidebar replacing the dropdown as primary nav.
   ============================================================================ */

/* Learn page — 3-column-ish layout (rail + content) per design_handoff.
   Override the fixed-height + internal-scroll pattern from learn.css so the
   page grows to content height and the BODY scrolls; rail is sticky so it
   stays visible while scrolling the center column. Specificity of
   `#page-learn.page.active.learn-guide-mode` outweighs
   `#page-learn.page.active { display: flex }` in learn.css. */
#page-learn.page.active.learn-guide-mode {
  display: grid;
  /* Single full-width column. The matchup dropdown lives in the right
     sidebar (renderSidebarMatchupPicker) so the old 220px left rail is
     unnecessary in guide mode. minmax(0, 1fr) lets the column shrink
     below its intrinsic width — otherwise wide archetype tabs would
     force it past the viewport. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  height: auto;           /* override #page-learn { height: calc(100vh - 58px) } */
  min-height: calc(100vh - 56px);
  overflow: visible;      /* override #page-learn.learn-guide-mode { overflow-y: auto } */
  background: var(--bg);
}

/* Guide mode: the sidebar (right column) holds a matchup dropdown at the
   top, so the full-width left rail isn't needed on desktop. Mobile still
   shows the rail via the @media override below. */
#page-learn.learn-guide-mode .learn-matchup-rail {
  display: none;
}
/* Non-guide mode (matchup picker landing) keeps the original rail layout. */
#page-learn:not(.learn-guide-mode) .learn-matchup-rail {
  grid-column: 1;
  grid-row: 1 / -1;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 14px 0;
  position: sticky;
  top: 45px;              /* exact app-header height — rail sits flush */
  align-self: start;
  max-height: calc(100vh - 45px);
  overflow-y: auto;
}

/* The design_handoff has no secondary LEARN header — the matchup rail is
   the primary nav, so hide the entire header strip on desktop. Kept in
   the DOM (not removed) so the mobile fallback dropdown still works. */
#page-learn.learn-guide-mode .learn-header {
  display: none;
}

@media (max-width: 900px) {
  #page-learn.learn-guide-mode .learn-header {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    padding: 12px 20px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    align-self: start;
    min-width: 0;
  }
}

#page-learn.learn-guide-mode .learn-content {
  display: block;
  grid-column: 1;
  grid-row: 2;
  padding: 0;             /* no gutter — columns go edge-to-edge */
  /* Do NOT use overflow: hidden here — it creates a containing block for
     position: sticky which breaks the right sidebar following scroll.
     Wide children (archetype tabs) have their own overflow-x: auto. */
  overflow: visible;
  min-height: 0;
  min-width: 0;
  align-self: start;      /* pin content to top of its grid cell */
}

#page-learn.learn-guide-mode #learn-viz-container {
  height: auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
}

/* Guide content widths — cap total width and center in viewport so the
   main column + 300px sidebar read as a cohesive unit instead of
   stretching edge-to-edge on wide monitors. Main column inside ends up
   ~720px (1120 - 300 sidebar - 36 gap - 48 padding), inside the
   50–75ch readable range. */
#page-learn.learn-guide-mode .learn-guide-view {
  max-width: 1120px;
  margin: 0 auto;
  box-sizing: border-box;
}

#page-learn.learn-guide-mode .learn-guide-view .archetype-tabs {
  /* Wrap overflowing tabs to a second row instead of showing a
     horizontal scrollbar — users reported the scrollbar as "ugly".
     Tabs are clickable pills, so two rows read naturally. */
  overflow: visible;
  flex-wrap: wrap;
  margin: 0 -1.5rem 0.85rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  row-gap: 0.25rem;
}

#page-learn.learn-guide-mode .learn-guide-view .arch-tab {
  flex-shrink: 0;
}

/* ============================================================================
   Inner guide layout — main column + right sidebar (per design_handoff).
   The sidebar renders alongside the hero/cheatsheet/timeline, not nested
   inside branch-grid (which is now single-column).
   ============================================================================ */
#page-learn.learn-guide-mode .guide-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  /* Wider gap so the main column (hero / timeline) doesn't butt up
     against the sidebar's first panel — the Details toggle and the
     Matchup panel were visually touching at the default 20px. */
  gap: 36px;
  align-items: start;
}

#page-learn.learn-guide-mode .guide-body-main {
  min-width: 0;
}

#page-learn.learn-guide-mode .guide-body-sidebar {
  position: sticky;
  top: 45px;              /* flush with app-header */
  max-height: calc(100vh - 45px);
  overflow-y: auto;
  align-self: start;
  /* Extra left padding on top of the grid gap so the sidebar's panel
     borders/backdrops don't sit flush against the main column edge. */
  padding-left: 8px;
  padding-right: 4px;
}

/* Collapse to single column on narrow viewports */
@media (max-width: 1100px) {
  #page-learn.learn-guide-mode .guide-body-grid {
    grid-template-columns: 1fr;
  }
  #page-learn.learn-guide-mode .guide-body-sidebar {
    position: static;
    max-height: none;
  }
}

/* Branch grid is now single column (sidebar moved out) */
#page-learn.learn-guide-mode .branch-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ============================================================================
   New sidebar panels — Key Timings, Production Windows, Matchup Tips
   ============================================================================ */
.sidebar-timings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-timing-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  align-items: baseline;
}

.sidebar-timing-time {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.sidebar-timing-action {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.sidebar-timing-note {
  font-family: var(--ui);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.sidebar-windows-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-window-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.sidebar-window-range {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.sidebar-window-phase {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sidebar-window-units {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sidebar-window-unit {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
}

.sidebar-tip-group {
  margin-top: 6px;
}

.sidebar-tip-group:first-child {
  margin-top: 0;
}

.sidebar-tip-group-label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.sidebar-tip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sidebar-tip-chip {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

.sidebar-tip-chip-strong {
  color: var(--green);
  background-color: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.25);
}

.sidebar-tip-chip-weak {
  color: var(--red);
  background-color: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.25);
}

/* Retry button on the guide-error card */
.learn-guide-retry {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background-color: rgba(86, 194, 255, 0.10);
  cursor: pointer;
  transition: all 0.15s;
}
.learn-guide-retry:hover {
  background-color: rgba(86, 194, 255, 0.20);
  color: var(--text);
}

@media (max-width: 900px) {
  #page-learn.learn-guide-mode { grid-template-columns: 1fr; }
  #page-learn.learn-guide-mode .learn-matchup-rail { display: none; }
  #page-learn.learn-guide-mode .learn-header,
  #page-learn.learn-guide-mode .learn-content { grid-column: 1; }
}

/* Rail groups */
.learn-rail-group {
  margin-bottom: 18px;
}

.learn-rail-heading {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.learn-rail-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Matchup row */
.learn-rail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  color: var(--text-dim);
  font-family: var(--ui);
  font-size: 12px;
  transition: all 0.15s;
}

.learn-rail-row:hover {
  background: var(--surface);
  color: var(--text);
}

.learn-rail-row.active {
  background: var(--accent-dim);
  border-left-color: var(--accent);
  color: var(--text);
}

.learn-rail-badges {
  display: inline-flex;
  gap: 2px;
}

.learn-rail-race {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.learn-rail-race.race-t { background-color: rgba(86, 194, 255, 0.18); color: var(--race-t); }
.learn-rail-race.race-p { background-color: rgba(247, 201, 72, 0.18); color: var(--race-p); }
.learn-rail-race.race-z { background-color: rgba(167, 139, 250, 0.18); color: var(--race-z); }

.learn-rail-vs {
  color: var(--text-muted);
  font-size: 10px;
}

.learn-rail-label {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.learn-rail-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}

.learn-rail-row.active .learn-rail-count {
  color: var(--accent);
}

/* Hide the header select when rail is present (rail is primary nav on desktop) */
@media (min-width: 901px) {
  #page-learn.learn-guide-mode .learn-header-select {
    display: none;
  }
  #page-learn.learn-guide-mode .learn-header-hint {
    display: none;
  }
  #page-learn.learn-guide-mode .learn-header-divider {
    display: none;
  }
}

/* ============================================================================
   Empty-state landing within guide-mode — without a guide loaded, the
   in-guide hero doesn't exist to own matchup selection, so expose the
   rail + header dropdown that guide-mode usually hides. Scoped via
   :has(.learn-guide-empty) so a loaded guide still gets the single-column
   layout the hero is designed for.
   ============================================================================ */
@media (min-width: 901px) {
  #page-learn.page.active.learn-guide-mode:has(.learn-guide-empty) {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  #page-learn.page.active.learn-guide-mode:has(.learn-guide-empty) .learn-matchup-rail {
    display: block;
    grid-column: 1;
    grid-row: 1 / -1;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    padding: 14px 0;
    position: sticky;
    top: 45px;
    align-self: start;
    max-height: calc(100vh - 45px);
    overflow-y: auto;
  }
  #page-learn.page.active.learn-guide-mode:has(.learn-guide-empty) .learn-header {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    padding: 12px 24px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    align-self: start;
  }
  #page-learn.page.active.learn-guide-mode:has(.learn-guide-empty) .learn-content {
    grid-column: 2;
    grid-row: 2;
  }
  /* Re-show the matchup select + subtitle the guide-mode header normally
     hides (the rail is the primary nav, but on the empty landing the select
     is the obvious affordance). */
  #page-learn.page.active.learn-guide-mode:has(.learn-guide-empty) .learn-header-select,
  #page-learn.page.active.learn-guide-mode:has(.learn-guide-empty) .learn-header-hint,
  #page-learn.page.active.learn-guide-mode:has(.learn-guide-empty) .learn-header-divider {
    display: inline-flex;
  }
}