/* Random team generator pages (/{league}/team/random/).

   Moved out of an inline <style> block in random_team.html so it is cacheable
   and visible to the CSS invariant scans in test_adsense.py. Those scans
   require: no native `&` nesting, and no inline margin on any class that
   shares an element with .section-shell (use margin-block). */

/* Generator widget - simplified, just handles internal spacing */
.generator-widget {
    text-align: center;
}

/* Jump-nav targets: offset the smooth scroll so the heading clears the header. */
html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 5rem;
}

/* Team display with good contrast.

   Padding trimmed from 1.5rem in the above-the-fold pass: the hero copy
   sits in front of an AdSense anchor unit on mobile (roughly 50-100px,
   absent on localhost), and this was the cheapest place to reclaim
   vertical space without shrinking the season line itself. min-height
   stays at 100px: at 375px width the hero panel is content-bound (~97px
   from its two-line placeholder text), so a smaller min-height buys zero
   fold headroom there, and shrinking it would only shrink the single-line
   desktop states of #wheelDisplay/#historyDisplay/#basicDisplay for no
   benefit. */
.team-display {
    background: var(--background);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 1.15rem;
    border-radius: 0.75rem;
    margin: 1rem 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    transition: all 0.3s ease;
    flex-direction: column;
    gap: 0.5rem;
}

.team-colors {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.team-display.animated {
    animation: slideIn 0.5s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Generate button using site button styles */
.generate-btn {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0.5rem;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.generate-btn:hover:not(:disabled) {
    background: var(--button-secondary-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

.generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.generate-btn.btn-clear {
    background: var(--surface-hover);
    color: var(--text-secondary);
    box-shadow: none;
}

.generate-btn.btn-clear:hover {
    background: var(--border);
    box-shadow: none;
}

/* Season selector */
.season-select {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--text-primary);
    min-width: 150px;
    cursor: pointer;
}

.season-select:focus {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
}

.loading-indicator {
    color: var(--text-secondary);
    margin-left: 1rem;
}

/* Spinner wheel styling */
.wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 1.5rem auto;
}

.wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid var(--accent-1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3), 0 0 30px rgba(190, 242, 100, 0.2);
    transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    background: var(--surface);
}

.wheel-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: right bottom;
    overflow: hidden;
}

/* Style for the pointer that indicates the winner */
.wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid var(--accent-2);
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.wheel svg text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    pointer-events: none;
}

.wheel-pointer::after {
    content: '';
    position: absolute;
    top: -35px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 50%;
}

/* Team grid picker styling */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

.team-card {
    background: var(--background);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    border: 2px solid var(--border);
    position: relative;
    overflow: hidden;
    font-size: 0.9rem;
}

.team-card-colors {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    display: flex;
}

.team-card-color-strip {
    flex: 1;
}

.team-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.team-card.highlighted {
    animation: pulse 0.5s ease;
    border-color: var(--accent-1);
    border-width: 3px;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(190, 242, 100, 0.4);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Number input styling */
.team-count-input {
    width: 80px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--text-primary);
    text-align: center;
    font-size: 1rem;
}

.team-count-input:focus {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
}

/* Intro/lead copy. Spans the full content column so its left edge lines up
   with the section cards below it (the generators, FAQ, etc.). */
.page-intro {
    color: var(--text-secondary);
}

/* Live confirmation line: updates (and briefly flashes) whenever the season
   changes, so the change is visible even when the wheel is below the fold. */
.season-selector-status {
    margin: 0.4rem 0 0;
    padding: 0.1rem 0.4rem;
    border-radius: 0.375rem;
    font-weight: 600;
    color: var(--accent-1);
    min-height: 1.25rem;
}

.season-selector-status.flash-update,
.rt-season-feedback.flash-update {
    animation: seasonStatusFlash 1.1s ease;
}

/* Per-slot season feedback: the loading state and the confirmation for a change
   made from THIS generator, rather than from the hero. #loadingIndicator and
   #seasonStatus both live in the hero, so a visitor changing the season down at
   #multi-team got their acknowledgement thousands of pixels above the viewport.

   Deliberately an inline <span> that renders empty, not a block of its own. An
   empty inline box adds nothing to the line it sits on, so the five slots cost
   no layout until they are populated - and college football clears the fold by
   only ~2px, so no fold budget can be spent on a below-fold interaction. The
   padding is on :not(:empty) for the same reason: no stray gap after the
   <select> while the span is unused. */
.rt-season-feedback {
    font-weight: 600;
    color: var(--accent-1);
    border-radius: 0.375rem;
}

.rt-season-feedback:not(:empty) {
    margin-inline-start: 0.4rem;
    padding: 0.1rem 0.4rem;
}

@keyframes seasonStatusFlash {
    0% { background: var(--accent-1); color: var(--text-primary); }
    40% { background: var(--accent-1-soft); }
    100% { background: transparent; color: var(--accent-1); }
}

/* Season line: the season control reads as a sentence with the <select>
   embedded, so the differentiator is stated in words rather than implied by
   a lone dropdown. Cloned into each generator by the script in the template;
   the clones use the same class.

   Deliberately NOT display:flex. A flex row makes every text run between
   inline elements its own atomic flex item, so long league names (College
   Football is the worst case) can't reflow across the <select> the way
   normal prose does: text wraps at item boundaries, not word boundaries,
   leaving stranded gaps. Plain inline flow lets the browser wrap this like
   any other sentence. */
.rt-season-line {
    text-align: center;
    color: var(--text-secondary);
    margin-block: 0.75rem 0;
}

.rt-season-line .js-team-count {
    font-weight: 700;
    color: var(--text-primary);
}

.rt-season-line .season-select {
    /* Not a .section-shell companion (descendant selector, not a class
       applied directly to a .section-shell element), so an inline margin
       here does not trip SectionShellCenteringTests. */
    min-width: 0;
    vertical-align: middle;
    margin-inline: 0.3rem;
}

/* Head-to-head (pick 2) display */
.h2h-display {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.h2h-team {
    flex: 1 1 0;
    max-width: 260px;
    background: var(--background);
    color: var(--text-primary);
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: bold;
    text-align: center;
    min-height: 110px;
}

.h2h-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent-1);
    flex: 0 0 auto;
}

.h2h-placeholder {
    color: var(--text-secondary);
    font-weight: normal;
}

/* Editable-map CTA emphasis (accent border + soft fill), named here for
   readability rather than spelled out as Tailwind arbitrary classes. */
.editable-cta-card {
    border: 2px solid var(--accent-1);
    background: var(--accent-1-soft);
}

/* Contextual links from a generated team into the rest of the site (the
   season's territory map, and the team's own stats page when it has one). */
.team-map-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.team-map-hook {
    font-size: 0.95rem;
    font-weight: 600;
    /* Inherits the site link color from the global `a` rule (--link-color);
       --link is not a defined token. */
}

.team-map-hook:hover {
    text-decoration: underline;
}

/* ── Hero ─────────────────────────────────────────────────────────────
   The above-the-fold block: headline, one-line lede, and the one-click
   generator. Sized so that on a 375x667 phone the generate button and the
   season line below it still clear the fold once the sticky header, the
   AdSense anchor unit, and both breadcrumb trails are accounted for.

   margin-block, never margin: this file is scanned by
   SectionShellCenteringTests and an inline margin on a .section-shell
   companion left-aligns the whole page shell. */
.rt-hero {
  text-align: center;
  margin-block: 0;
}

.rt-hero__title {
  font-size: clamp(1.4rem, 5.5vw, 2.75rem);
  line-height: 1.08;
  font-weight: 800;
  margin-block: 0 0.5rem;
}

/* Carries both differentiators (six tools, every season) in one sentence.
   Kept to roughly two lines at 375px: it is the last thing that can grow
   before the generate button drops below the fold. */
.rt-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 34rem;
  margin-block: 0 1rem;
  margin-inline: auto;
}

/* Bigger than the in-page generate buttons: this is the page's primary
   action and the only one most visitors will use. */
.generate-btn--lg {
  font-size: 1.0625rem;
  padding: 0.85rem 2rem;
}

/* Mobile-only headroom pass: College Football's longer name pushes its H1
   and lede onto more lines than NFL's, leaving the worst-case league only
   ~67px of headroom below the season line against an estimated 50-100px
   AdSense anchor overlay. Targets the lede and title spacing only, never
   the generate button, .team-display's own size, or the season line
   itself: those clearing the fold is the entire point of this redesign.
   Desktop is untouched; it already has room to spare.

   #basicDisplay (not the shared .team-display rule) also gets a smaller
   top margin here. .rt-hero__lede's own margin-bottom cannot buy any
   headroom on its own: it is an adjoining sibling margin that collapses
   with .team-display's margin-top, and the collapsed gap is the LARGER of
   the two, so shrinking the lede's side alone did nothing while
   .team-display's 1rem top margin stayed put. #basicDisplay is the ID of
   the one .team-display instance inside this hero (Task 3's comment notes
   it is the only one on the page), so overriding it here does not touch
   #wheelDisplay/#historyDisplay, and it changes only the
   space before the panel, not the panel's own padding/min-height/font. */
@media (max-width: 480px) {
  .rt-hero__lede {
    font-size: 1rem;
    line-height: 1.25;
    margin-block: 0 0;
  }

  .rt-hero__title {
    margin-block: 0 0;
  }

  #basicDisplay {
    margin-top: 0;
  }
}

/* ── Tool row ─────────────────────────────────────────────────────────
   Six generators on one page is the second differentiator, so the tools
   are buttons rather than a bullet list. Same auto-fit grid as the
   homepage league buttons: the labels are very uneven in length
   ("Pick 2 NFL Teams" vs "Random College Football Team with History")
   and wrapped flex leaves a ragged stack. */
.rt-tools__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-block: 1.5rem 0.5rem;
}

.rt-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.5rem;
}

.rt-tools .btn {
    justify-content: center;
    text-align: center;
}

/* Shared draw list: numbered results + copy/export controls. Used by the
   spinner wheel, the history generator and the multi-team generator. */
.draw-list {
    margin-top: 1rem;
    text-align: left;
}

.draw-list__heading {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.draw-list__items {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

/* The rank is rendered as a real element in _render(), not a CSS counter:
   a ::before counter is invisible to textContent, so it would neither survive
   a copy-paste from the page nor be assertable in jsdom. One source for the
   number, not two. */
.draw-list__rank {
    color: var(--text-secondary);
}

.draw-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

.draw-list__item:last-child {
    border-bottom: none;
}

.draw-list__colors {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.draw-list__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.draw-list__format {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.draw-list__btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
}

/* No-repeat toggle above the history generator's button row, and the
   exhaustion status line that replaces a silently-dead "Give Me a Team"
   click once every team has been drawn. */
.rt-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.rt-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.rt-toggle__hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.rt-draw-status {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}