/* ═══════════════════════════════════════════════════════════════════════════
   theme.css - system pass over Community, Research and My League.

   These three screens were built at different times and drifted away from the
   rest of the app: their surfaces used four different corner radii, their
   section labels used four different sizes, and the purple-to-cyan accent that
   defines the hero and Ask Sage never reached them, so they read as grey on
   grey. Everything here pulls those screens back onto the values the rest of
   the app already uses. Loaded last on purpose, so it settles the cascade
   against styles.css and v11/v12 without needing !important.

   Only existing CSS variables are used, so light and dark both hold.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Surfaces: one radius per nesting level ───────────────────────────────
   The live skin defines two: --radius-lg (18px) for a top-level card or panel
   and --radius (12px) for anything nested inside one. These blocks predate that
   and shipped 8px, 10px, 11px and 14px corners side by side. */

/* Community trade cards sat at 8px inside an 18px card, which read as a
   different component family than the market panels beside them. Nested, so
   they take the inner radius, like .mkt-mover already does. */
.comm-card{
  border-radius:var(--radius);
  padding:1.125rem;
}

/* Also nested inside a card, and was the smallest radius on the screen. */
.stand-wrap{border-radius:var(--radius)}

/* Buy/Sell rows carried an 11px radius and a vertical gradient that no other
   list in the app uses; flattening them matches .mkt-mover and .comm-card. */
.bs-row{
  background:var(--surface2);
  border-radius:var(--radius);
  padding:11px 13px;
  margin-bottom:8px;
}

/* Market stat tiles sit as siblings of .mkt-panel, so they should share its
   surface and border rather than looking like nested chips. */
.mkt-stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  transition:border-color .25s var(--ap-ease,ease);
}

/* Players database result cards: styling moved out of the inline attribute in
   app.js so they follow the same radius and hover as every other list item. */
.pdb-card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:11px 13px;
  cursor:pointer;
  transition:border-color .2s var(--ap-ease,ease),background .2s var(--ap-ease,ease);
}


/* ── 2. Tabs: one active state, and the accent finally shows on desktop ──────
   Research stacked two tab rows with two different active treatments: the
   .inner-tab went neutral grey (v11) while the .ctx-seg-btn right under it
   went purple. Same control, same screen, two answers. This aligns .inner-tab
   to the accent treatment the rest of the app uses for "selected".

   Scoped to desktop on purpose: the phone rules in v12.css already do this and
   belong to the mobile pass, so nothing here reaches under 701px. */
@media(min-width:701px){
  html.v11 .inner-tab-bar, html.v12 .inner-tab-bar{
    background:rgba(155,114,232,.07);
    border-color:rgba(155,114,232,.16);
  }
  html.v11 .inner-tab.active, html.v12 .inner-tab.active{
    background:rgba(155,114,232,.20);
    color:var(--accent-bright);
    font-weight:600;
    box-shadow:0 0 0 1px rgba(155,114,232,.32) inset;
  }
  html.v11 .inner-tab:hover:not(.active), html.v12 .inner-tab:hover:not(.active){
    color:var(--text);
    background:rgba(155,114,232,.07);
  }

  /* Community's Refresh is the only button in the header row; grey made the
     one interactive element up there the quietest thing on the screen. */
  .comm-head .btn-sm{
    background:rgba(155,114,232,.13);
    border-color:rgba(155,114,232,.30);
    color:var(--accent-bright);
  }
}


/* ── 3. Where the accent goes ───────────────────────────────────────────────
   Deliberately limited to four jobs: section markers, headline figures,
   selected state, and the hover on a row you can click. Anything that already
   carries meaning through colour (green risers, red fallers, grade letters) is
   left alone. */

/* A short gradient bar in front of every panel title. It is the cheapest way
   to give each section a brand marker without tinting whole blocks. */
.mkt-panel-title::before{
  content:"";
  width:3px;
  height:13px;
  border-radius:100px;
  background:#9b72e8;
  flex-shrink:0;
}

/* Headline market figures. The riser and faller tiles keep green and red,
   which is why this excludes them rather than colouring all four. */
.mkt-stat-val:not(.mkt-up):not(.mkt-down){color:var(--accent-bright)}

/* Every clickable row in these screens converges on one hover colour. */
.comm-card:hover,
.bs-row:hover,
.mkt-stat:hover,
.pdb-card:hover{border-color:rgba(155,114,232,.38)}

/* v11 removed lift-on-hover everywhere else; Buy/Sell rows still had it. */
.bs-row:hover{transform:none}
.pdb-card:hover{background:var(--surface3)}


/* ── 4. Type scale: one size for micro-labels, lining figures for numbers ────
   These screens had uppercase micro-labels at 9px, 10px and 12px with three
   different letter-spacings. One value now, matching .mkt-stat-lbl, which was
   the most used. */
.mkt-stat-lbl,
.stand-table th,
.qotd-label,
.mkt-mover-pos{
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* Figures that get compared down a column need lining, fixed-width digits.
   v11 did this for the chart values and missed the tables and tiles. */
.mkt-stat-val,
.stand-table .st-num,
.mkt-mover-pct,
.comm-chip-lg{font-variant-numeric:tabular-nums}


/* ── 5. Dense tables and lists ───────────────────────────────────────────────
   The standings table is the densest thing in the app and had no header
   contrast in dark mode (that rule existed for light only) and no row hover,
   so reading across a row meant tracking with a finger. */
.stand-table th{
  background:var(--surface2);
  color:var(--muted);
  border-bottom:1px solid var(--border2);
  padding:8px 10px;
}
.stand-table td{padding:9px 10px}

/* Team is the only free-text column; everything else is a figure or a short
   code, and right-aligning them makes the column edges line up. The nth-child
   holds whether or not the Record and PF columns are present, because Team is
   always second. */
.stand-table th:not(:nth-child(2)),
.stand-table td:not(:nth-child(2)){text-align:right}
.stand-table th:nth-child(2),
.stand-table td:nth-child(2){text-align:left}

.stand-table tbody tr{transition:background .15s}
.stand-table tbody tr:hover td{background:rgba(155,114,232,.07)}

/* The user's own row was tinted with a 90deg gradient set on the cell, so it
   restarted at every <td> and striped the row. A flat tint plus one accent
   edge marks the row without the banding. */
.stand-table tr.st-me td{background:rgba(155,114,232,.10)}
.stand-table tr.st-me td:first-child{box-shadow:inset 2px 0 0 var(--accent-bright)}
.stand-table tr.st-me:hover td{background:rgba(155,114,232,.16)}

/* Roster grade breakdown: same row rhythm and hover as the tables above. */
.pos-grade-row{
  padding:11px 6px;
  border-radius:var(--radius);
  transition:background .15s;
}
.pos-grade-row:hover{background:rgba(155,114,232,.06)}
.pos-grade-row > :last-child{font-variant-numeric:tabular-nums}

/* Market movers were the one dense list with no vertical rhythm of its own. */
.mkt-mover{padding:8px 8px}


/* ── 6. Light theme corrections ─────────────────────────────────────────────
   The accent overlays above are purple at low alpha, which works on both
   backgrounds, but the two surfaces that changed family need light-mode
   parity with the .card rule v11 sets. */
[data-theme="light"] .mkt-stat{background:var(--surface);border-color:var(--border)}
[data-theme="light"] .stand-table th{background:var(--surface2)}
[data-theme="light"] .stand-table tbody tr:hover td{background:rgba(106,63,255,.06)}
[data-theme="light"] .pos-grade-row:hover{background:rgba(106,63,255,.05)}
[data-theme="light"] .pdb-card:hover{background:var(--surface2)}


/* ═══════════════════════════════════════════════════════════════════════════
   PART 2 - brand presence, not just consistency.

   Part 1 above unified radii and spacing, which was correct but invisible:
   most of those values already matched, so the screens still read as grey on
   grey. What was actually missing is the purple-to-cyan identity that carries
   the hero and Ask Sage. This part puts it on them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section headings: an accent rule makes a heading read as the start of a
   section instead of one more line of bold grey. */
.mkt-panel-title,.comm-section-title,.pdb-title{position:relative;padding-left:11px}
.mkt-panel-title::before,.comm-section-title::before,.pdb-title::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:1.05em;border-radius:2px;
  background:#9b72e8;
}

/* Active inner tab was a slightly lighter grey on grey. Scoped to match the
   skin's own specificity, which targets these directly and would otherwise
   keep winning. */
html.v11 .inner-tab.active,html.v12 .inner-tab.active,.inner-tab.active{
  background:rgba(155,114,232,.19);
  border-color:rgba(155,114,232,.45);color:var(--text);
}
html.v11 .inner-tab:hover:not(.active),html.v12 .inner-tab:hover:not(.active),.inner-tab:hover:not(.active){
  color:var(--text);border-color:rgba(155,114,232,.28);
}

/* A hairline of brand colour down the leading edge of each row. Enough to tie
   the screen to the product, not so much that every row shouts. */
.comm-card,.pdb-card,.bs-row{position:relative;overflow:hidden}
.comm-card::before,.pdb-card::before,.bs-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:rgba(155,114,232,.7);
  opacity:.34;transition:opacity .16s ease;
}
.comm-card:hover::before,.pdb-card:hover::before,.bs-row:hover::before{opacity:1}
.comm-card:hover,.pdb-card:hover,.bs-row:hover{border-color:rgba(155,114,232,.4)}

/* The market figure is the reason these screens exist, so it stops sharing a
   colour with its own label. Up and down keep theirs: those carry meaning. */
.mkt-stat-val:not(.mkt-up):not(.mkt-down){color:var(--accent-bright);font-weight:700}

/* Dense tables: a header that reads as a header, and figures aligned in a
   column the eye can run down. First column is the team name and stays left. */
.stand-table th{
  color:var(--muted2);font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;border-bottom:1px solid rgba(155,114,232,.22);
}
.stand-table tbody tr:hover td{background:rgba(155,114,232,.055)}
.stand-table td:not(:first-child),.stand-table th:not(:first-child){
  text-align:right;font-variant-numeric:tabular-nums;
}

/* Empty states are the first thing a new manager sees on all three screens. */
.mkt-empty,.ideas-empty,.comm-empty{
  border:1px dashed rgba(155,114,232,.28);border-radius:var(--radius);
  background:rgba(155,114,232,.045);padding:22px 18px;color:var(--muted2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PART 3 - the draft system.

   One vocabulary for everything the mock draft renders: a position speaks
   through ONE hex everywhere (board chip edge, list row edge, player card
   ring, filter chips), and motion is one gesture - the brand's purple-to-cyan
   light passing over the thing that just happened - applied to exactly four
   moments: a pick locking in, a tier revealing itself, the player card
   blooming open, and the on-the-clock cell breathing. Nothing else moves.

   Loaded last, so these settle over styles.css without !important. The
   selectors match the classes app.js now emits (mdb-pk / pos-XX /
   md-ch-row / md-tier-sep).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* the position palette - the same six hexes app.js has always used, now
     owned by CSS so every surface reads them from one place */
  --pos-qb:#a78bfa; --pos-rb:#4ade80; --pos-wr:#fbbf24;
  --pos-te:#f87171; --pos-k:#38bdf8;  --pos-def:#94a3b8;
  /* the signature: the hero's purple-to-cyan, as a reusable light */
  --tm-grad:linear-gradient(90deg,#9b72e8 0%,#67e8f9 100%);
}

/* A chip, row or cell declares its position once; everything inside inherits
   the edge colour and the tint from these two custom properties. */
.pos-QB{--pos:var(--pos-qb);--pos-tint:rgba(167,139,250,.10)}
.pos-RB{--pos:var(--pos-rb);--pos-tint:rgba(74,222,128,.09)}
.pos-WR{--pos:var(--pos-wr);--pos-tint:rgba(251,191,36,.09)}
.pos-TE{--pos:var(--pos-te);--pos-tint:rgba(248,113,113,.09)}
.pos-K{--pos:var(--pos-k);--pos-tint:rgba(56,189,248,.09)}
.pos-DEF{--pos:var(--pos-def);--pos-tint:rgba(148,163,184,.09)}

/* ── the board ──────────────────────────────────────────────────────────────
   Teams across the top, rounds down the side, snake order - Stacked's grid.
   Every pick is a compact chip: position-coloured left edge, a whisper of the
   same colour washed across the chip, name up to two lines, pos + team below,
   pick number top-right. */
.mdb-grid{gap:4px;padding:10px}
.mdb-head{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted2);padding:9px 6px;border-radius:8px;
}
/* your column: marked by the brand, quietly - a tint and a gradient baseline */
.mdb-head.mdb-me{
  background:var(--accent-dim);color:var(--accent-bright);
  box-shadow:inset 0 -2px 0 0 rgba(155,114,232,.75);
}
.mdb-round{font-size:10px;letter-spacing:.04em}
.mdb-cell{border-radius:8px}
/* a made pick: the chip. Tint fades out left-to-right so the colour reads as
   an edge treatment, never a filled block - twelve columns of solid fills is
   exactly the noise Stacked avoids. */
.mdb-cell.mdb-pk{
  cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--pos-tint) 0%,rgba(0,0,0,0) 62%),var(--surface2);
  border-left:3px solid var(--pos,var(--border));
  transition:filter .16s var(--ap-ease,ease);
}
.mdb-cell.mdb-pk:hover{filter:brightness(1.18)}
.mdb-cell.mdb-pk .mdb-sub{color:var(--pos,var(--muted))}
.mdb-pickno{font-variant-numeric:tabular-nums}
/* your own picks: hairline brand outline on top of the position edge */
.mdb-cell.mdb-minepick{outline:1px solid rgba(155,114,232,.35);outline-offset:-1px}

/* MOMENT 1 - the lock-in. A new pick settles with a soft spring while the
   brand's light passes over it once. Replaces the plain scale pop. */
.mdb-cell.mdb-latest{animation:tmSettle .38s cubic-bezier(.2,1.4,.4,1) both}
.mdb-cell.mdb-latest::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(155,114,232,.32) 46%,rgba(103,232,249,.38) 54%,transparent 68%);
  transform:translateX(-130%);
  animation:tmSweep .5s ease-out .08s forwards;
}
@keyframes tmSettle{0%{transform:scale(.92);opacity:0}62%{transform:scale(1.015)}100%{transform:scale(1);opacity:1}}
@keyframes tmSweep{to{transform:translateX(130%)}}

/* MOMENT 4 - on the clock. The one cell that matters breathes the accent;
   everything else on the board holds still. */
.mdb-cell.mdb-onclock{
  border:1px solid rgba(155,114,232,.55);
  animation:tmClock 1.8s ease-in-out infinite;
}
@keyframes tmClock{
  0%,100%{box-shadow:0 0 0 0 rgba(155,114,232,0)}
  50%{box-shadow:0 0 16px 1px rgba(155,114,232,.32)}
}

/* ── the available list ─────────────────────────────────────────────────────
   Rows: headshot, name, meta, queue and draft controls - with the same
   position edge as the board, so the two surfaces read as one system. */
.md-ch-row{
  display:flex;align-items:center;gap:8px;padding:9px 11px 9px 8px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:3px solid var(--pos,var(--border));
  border-radius:10px;cursor:pointer;
  transition:border-color .16s var(--ap-ease,ease),background .16s var(--ap-ease,ease);
}
.md-ch-row:hover{border-color:rgba(155,114,232,.45);border-left-color:var(--pos,var(--border));background:var(--surface3)}
/* Sage's pick: carries a wash of the brand, not a shout */
.md-ch-row.md-ch-rec{
  border-color:rgba(155,114,232,.55);border-left-color:var(--pos,var(--border));
  background:linear-gradient(100deg,rgba(155,114,232,.10) 0%,rgba(0,0,0,0) 60%),var(--surface2);
}
.md-ch-row.md-ch-on{outline:2px solid var(--accent-bright);outline-offset:1px}

/* MOMENT 2 - a tier reveals itself. The separator hairlines shimmer once with
   the brand light, then go quiet. The cliff count rides the label. */
.md-tier-sep{
  grid-column:1/-1;display:flex;align-items:center;gap:10px;
  font-size:9.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin:3px 0 -1px;
}
.md-tier-sep .sep-line{flex:1;height:1px;background:var(--border);position:relative;overflow:hidden}
.md-tier-sep .sep-line::after{
  content:'';position:absolute;inset:0;background:var(--tm-grad);opacity:.6;
  transform:translateX(-101%);animation:tmSweepLine .9s ease-out .15s forwards;
}
@keyframes tmSweepLine{to{transform:translateX(101%)}}
.md-tier-sep .md-cliff{color:#f87171;letter-spacing:.06em}

/* ── the player card ────────────────────────────────────────────────────────
   The dossier layout (identity rail + depth column at >=900px) comes from
   styles.css; this pass gives it the system's finish: a gradient signature
   hairline along the top, a position-coloured photo ring, one more step of
   type hierarchy, and the bloom-open. */
/* radius scoped above the phone breakpoint: styles.css makes the card the
   whole screen under 701px, and rounding a fullscreen sheet leaks background
   through the corners */
@media(min-width:701px){.pm-card{border-radius:var(--radius-lg)}}
.pm-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--tm-grad);z-index:3;
}
/* MOMENT 3 - the bloom. Opens from a soft scale+fade, one spring, 260ms. */
.pm-overlay.open .pm-card{animation:tmBloom .26s cubic-bezier(.16,1,.3,1) both}
@keyframes tmBloom{from{transform:translateY(14px) scale(.96);opacity:.35}to{transform:none;opacity:1}}
/* the photo ring takes the player's position colour (accent stays the fallback) */
.pm-card:has(.pm-pos-badge.QB) .pm-photo{border-color:var(--pos-qb)}
.pm-card:has(.pm-pos-badge.RB) .pm-photo{border-color:var(--pos-rb)}
.pm-card:has(.pm-pos-badge.WR) .pm-photo{border-color:var(--pos-wr)}
.pm-card:has(.pm-pos-badge.TE) .pm-photo{border-color:var(--pos-te)}
.pm-card:has(.pm-pos-badge.K) .pm-photo{border-color:var(--pos-k)}
.pm-card:has(.pm-pos-badge.DEF) .pm-photo{border-color:var(--pos-def)}
.pm-name{letter-spacing:-.02em}
.pm-pos-badge{border-radius:6px;letter-spacing:.04em}
.pm-pos-badge.K{background:rgba(56,189,248,.14);color:var(--pos-k)}
.pm-pos-badge.DEF{background:rgba(148,163,184,.14);color:var(--pos-def)}
.pm-ktc-bar{border-radius:var(--radius)}
.pm-stat{border-radius:10px;padding:.7rem .8rem}
.pm-stat-val{font-size:16px;font-variant-numeric:tabular-nums}
/* the depth column earns three stats across once it has the width */
@media(min-width:560px){.pm-grid{grid-template-columns:repeat(3,1fr);gap:10px}}

/* ── the setup screen and the shell around the board ────────────────────────
   Same nesting rule as everywhere else: panels inside a card sit at the inner
   radius (the 14px/16px inline values were edited in index.html). The section
   chips get a real selected state instead of a bare border swap. */
.md-sec-btn{transition:border-color .16s var(--ap-ease,ease),color .16s var(--ap-ease,ease),background .16s var(--ap-ease,ease)}
.md-sec-btn.on{background:var(--accent-dim);border-color:rgba(155,114,232,.5);color:var(--accent-bright)}
.md-strat-card{border-radius:var(--radius)}
.md-pos-chip.active{border-color:rgba(155,114,232,.5)}
/* a position filter chip wears its own position colour while selected */
.md-pos-chip[data-pos="QB"].active{color:var(--pos-qb);border-color:var(--pos-qb);background:rgba(167,139,250,.12)}
.md-pos-chip[data-pos="RB"].active{color:var(--pos-rb);border-color:var(--pos-rb);background:rgba(74,222,128,.10)}
.md-pos-chip[data-pos="WR"].active{color:var(--pos-wr);border-color:var(--pos-wr);background:rgba(251,191,36,.10)}
.md-pos-chip[data-pos="TE"].active{color:var(--pos-te);border-color:var(--pos-te);background:rgba(248,113,113,.10)}
.md-pos-chip[data-pos="K"].active{color:var(--pos-k);border-color:var(--pos-k);background:rgba(56,189,248,.10)}
.md-pos-chip[data-pos="DEF"].active{color:var(--pos-def);border-color:var(--pos-def);background:rgba(148,163,184,.10)}

/* ── light theme parity ─────────────────────────────────────────────────────
   The tints above are low-alpha colour over the surface tokens, so they hold
   on white; only the sweep's light needs to dim so it doesn't flash. */
[data-theme="light"] .mdb-cell.mdb-latest::after{
  background:linear-gradient(105deg,transparent 32%,rgba(106,63,255,.16) 46%,rgba(8,145,178,.18) 54%,transparent 68%);
}
[data-theme="light"] .mdb-cell.mdb-pk:hover{filter:brightness(.97)}
[data-theme="light"] .md-tier-sep .sep-line::after{opacity:.4}

/* ── the signature, carried across the app ──────────────────────────────────
   The purple-to-cyan hairline the player card wears along its top also runs
   over the two other surfaces where Sage puts his name: the trade verdict and
   his pick recommendation in the draft. One mark, three places - the moments
   the product speaks all read as the same voice. */
#md-sage,.verdict-card{position:relative;overflow:hidden}
#md-sage::before,.verdict-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--tm-grad);opacity:.85;
}

/* Every empty state in the app takes the one dashed-accent treatment the
   Community/Research pass established - the mock's included. */
.empty-state{
  border:1px dashed rgba(155,114,232,.28);border-radius:var(--radius);
  background:rgba(155,114,232,.045);color:var(--muted2);
}

/* ── stillness is a feature ────────────────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  .mdb-cell.mdb-latest,.mdb-cell.mdb-onclock,.pm-overlay.open .pm-card{animation:none}
  .mdb-cell.mdb-latest::after,.md-tier-sep .sep-line::after{animation:none;display:none}
}