/* Made from app/web/styles.css (the app's own stylesheet) by site/pages.mjs. Do not edit by hand. */
.fpf-quick {
/* Front Porch Fantasy demo. Working colors from the color research (research_notes/App color scheme):
   evening-sky navy, cream, porch-light amber; win = teal, loss = orange-red, always with a word and an arrow.
   Follows the phone or computer's dark/light setting. These are working colors, not the final pick. */
& {
  --bg: #FBF7F0; --surface: #FFFFFF; --surface-2: #F3EDE2; --text: #16202B; --muted: #5B6672; --line: #E2D9CA;
  --accent: #9A6410; --accent-bg: #F2B544; --accent-ink: #16202B;
  --win: #007A59; --win-bg: #DCF3EA; --loss: #B34E00; --loss-bg: #FBE6D6; --even: #5B6672; --even-bg: #ECE7DD;
  /* borders, option 4 (owner's pick 2026-11-11): --edge is at least 3 to 1 against the page and buttons */
  --edge: #8C7D66; --edge-soft: #BFB29C; --lift: 0 1px 4px rgba(22, 32, 43, 0.10);
}
@media (prefers-color-scheme: dark) {
  & {
    --bg: #16202B; --surface: #1E2B38; --surface-2: #263545; --text: #F2EDE4; --muted: #A9B4BF; --line: #33455A;
    --accent: #F2B544; --accent-bg: #F2B544; --accent-ink: #16202B;
    --win: #2ECC9A; --win-bg: #173A36; --loss: #FF8A4C; --loss-bg: #432A1E; --even: #A9B4BF; --even-bg: #2A3847;
    --edge: #6B819A; --edge-soft: #4A5E75; --lift: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
}
* { box-sizing: border-box; }
& { -webkit-text-size-adjust: 100%; }
& { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
h2 { font-size: 1.2rem; margin: 0 0 6px; }
h3 { font-size: 1rem; margin: 0 0 8px; }
p { margin: 6px 0; }
.top { max-width: 1040px; margin: 0 auto; padding: 18px 16px 10px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.brand { font: 700 1.5rem/1.1 Georgia, "Times New Roman", serif; letter-spacing: 0.2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand small { font: 500 0.8rem system-ui, sans-serif; color: var(--muted); letter-spacing: 0.4px; }
.logo { width: 48px; height: 48px; border-radius: 11px; display: block; flex: none; }
.league-chip { font-size: 0.85rem; color: var(--muted); }
.notice { background: var(--surface-2); border-left: 4px solid var(--accent-bg); padding: 10px 14px; border-radius: 8px; font-size: 0.92rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 14px 0; }
.hint { color: var(--muted); font-size: 0.88rem; }
.controls { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.controls .hint { flex-basis: 100%; margin: 0; }
label { font-weight: 600; font-size: 0.92rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
label.inline { display: inline-flex; }
select { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 40px; max-width: 100%; }
button { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg); font-weight: 700; }
button:disabled { opacity: 0.5; cursor: default; }
.seg { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.seg[hidden] { display: none; }
.irline { padding: 6px 10px; font-size: 0.82rem; color: var(--muted); }
.notice small { display: block; margin-top: 4px; color: var(--muted); }
.seg-label { font-weight: 600; font-size: 0.92rem; margin-right: 8px; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-of-type { border-radius: 8px 0 0 8px; margin-left: 0; }
.seg button:last-of-type { border-radius: 0 8px 8px 0; }
.seg button[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-ink); font-weight: 700; border-color: var(--accent-bg); }
.team-head { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; margin-bottom: 8px; }
.team-head .big { font-size: 1.6rem; font-weight: 700; }
.stat { color: var(--muted); font-size: 0.9rem; }
.stat b { color: var(--text); font-size: 1.05rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
td:first-child { white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.weak td { background: var(--loss-bg); }
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .builder { grid-template-columns: 1fr; } }
.roster { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.row { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row.picked { background: color-mix(in srgb, var(--accent-bg) 18%, transparent); }
.row.out .pname { color: var(--muted); }
.pos { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.pname { background: none; border: 0; padding: 4px 0; min-height: 32px; text-align: left; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.pname small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; text-decoration: none; }
.ppw { font-variant-numeric: tabular-nums; font-size: 0.88rem; color: var(--muted); white-space: nowrap; }
.pick { min-width: 58px; padding: 6px 10px; font-size: 0.85rem; }
.pick[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg); font-weight: 700; }
.offer { margin: 14px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .offer { grid-template-columns: 1fr; } }
.offer div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-height: 58px; }
.offer b { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .verdicts { grid-template-columns: 1fr; } }
.verdict { border-radius: 12px; padding: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.verdict .who { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.verdict .word { font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin: 2px 0; }
.verdict.win { background: var(--win-bg); } .verdict.win .word { color: var(--win); }
.verdict.loss { background: var(--loss-bg); } .verdict.loss .word { color: var(--loss); }
.verdict.even { background: var(--even-bg); } .verdict.even .word { color: var(--even); }
.verdict ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.9rem; }
.chg.win { color: var(--win); font-weight: 700; } .chg.loss { color: var(--loss); font-weight: 700; } .chg.even { color: var(--even); }
.market { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 0.93rem; }
.tabs { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.tabs button[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg); font-weight: 700; }
.idea { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; background: var(--surface); }
@media (max-width: 600px) { .idea { grid-template-columns: 1fr; } }
.idea .line { font-weight: 600; }
.idea .sub { font-size: 0.88rem; color: var(--muted); }
.tag { display: inline-block; font-size: 0.78rem; padding: 1px 8px; border-radius: 999px; background: var(--loss-bg); color: var(--loss); font-weight: 600; }
footer { max-width: 1040px; margin: 0 auto; padding: 0 16px 30px; color: var(--muted); font-size: 0.8rem; }
.modal { position: fixed; inset: 0; background: rgba(10, 15, 22, 0.6); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; z-index: 10; }
.modal[hidden] { display: none; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; width: min(760px, 100%); position: relative; }
.sheet .close { position: absolute; top: 12px; right: 12px; }
.sheet h2 { padding-right: 84px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.grid3 div { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; }
.grid3 b { display: block; font-size: 1.2rem; }
.grid3 span { font-size: 0.8rem; color: var(--muted); }

/* ---- Borders, option 4 (owner's pick 2026-11-11, sheet in design/idea-sheets/borders) ----
   Buttons and dropdowns: a firm edge so they read as things to press.
   Sections and boxes: a firmer edge and a slight lift.
   Colored edges only where the eye should go: win/loss cards, the weakest spot, players picked for a trade.
   The colored edges always sit beside a word and an arrow, so color is never the only sign. */
button:not(.pname), select { border-color: var(--edge); }
.card { border-color: var(--edge-soft); box-shadow: var(--lift); }
.roster { border-color: var(--edge-soft); }
.offer div { border: 1px solid var(--edge-soft); }
.verdict { border-color: var(--edge-soft); border-left: 7px solid var(--even); }
.verdict.win { border-left-color: var(--win); }
.verdict.loss { border-left-color: var(--loss); }
.market { border: 1px solid var(--edge-soft); }
.idea { border-color: var(--edge-soft); }
tr.weak td:first-child { box-shadow: inset 5px 0 0 var(--loss); }
.row.picked { box-shadow: inset 5px 0 0 var(--accent-bg); }

/* ---- Quick trade check (option 3, owner's pick 2026-11-11): Side A / Side B, a verdict for each ---- */
.section-title { font: 700 1.3rem/1.2 Georgia, "Times New Roman", serif; margin: 26px 0 4px; }
.qsettings { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 10px 0 4px; }
.qsides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.qside h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin: 6px 0; }
.qchip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--edge-soft); border-radius: 10px; padding: 4px 4px 4px 10px; margin-bottom: 6px; background: var(--surface); }
.qchip .pname { flex: 1; min-width: 0; font-size: 0.92rem; }
.qchip .x { min-height: 34px; min-width: 34px; padding: 0; color: var(--muted); }
.qadd { width: 100%; font: inherit; font-size: 0.92rem; color: var(--text); background: var(--surface-2); border: 1px dashed var(--edge); border-radius: 10px; padding: 9px 10px; min-height: 42px; }
.qadd:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-style: solid; }
#qResult:not(:empty) { margin-top: 14px; }
#qResult .verdict .word { font-size: 1.4rem; }
.qnotes { font-size: 0.88rem; color: var(--muted); padding-left: 18px; margin: 10px 0; }
.qnext { margin-top: 6px; }
#qResult .verdicts { grid-template-columns: 1fr 1fr; gap: 10px; }
#qResult .verdict { padding: 12px; }
#qResult td:first-child { white-space: normal; }
#qResult th, #qResult td { padding: 7px 6px; }
@media (max-width: 480px) { .seg { flex-wrap: nowrap; } .seg-label { max-width: 6.8em; line-height: 1.2; } }

/* ---- "How this grade was made" fold-out (owner's pick 2026-11-11) ---- */
details.how { margin: 12px 0; }
details.how > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 700;
  border: 1px solid var(--edge); border-radius: 8px; padding: 9px 14px; min-height: 42px; background: var(--surface-2); }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::after { content: "▼ Open"; font-weight: 600; color: var(--muted); font-size: 0.9rem; }
details.how[open] > summary::after { content: "▲ Close"; }
details.how > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.steps { border: 1px solid var(--edge-soft); border-radius: 10px; padding: 4px 12px 12px; margin-top: 8px; background: var(--surface-2); font-size: 0.92rem; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: start; margin: 12px 0 0; }
.step b.n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-ink); font-size: 0.9rem; }
.step p { margin: 0 0 4px; }
.step .t { font-weight: 700; }
.note { font-size: 0.82rem; color: var(--muted); }
table.mini { font-size: 0.85rem; } table.mini th, table.mini td { padding: 5px 6px; }
.weeks { display: grid; gap: 4px; margin: 6px 0 4px; }
.weeks div { text-align: center; border-radius: 6px; padding: 3px 0; font-size: 0.78rem; line-height: 1.3; background: var(--surface); border: 1px solid var(--line); }
.weeks .w { color: var(--muted); display: block; }
.weeks .up { color: var(--win); font-weight: 700; }
.weeks .dn { color: var(--loss); font-weight: 700; }
.weeks .po { border: 2px solid var(--accent-bg); }
.sure { border-left: 5px solid var(--accent-bg); background: var(--surface); border-radius: 8px; padding: 9px 12px; margin-top: 12px; font-size: 0.9rem; }
.sure a, .steps a, .help a { color: var(--accent); }
.top-link { font-size: 0.9rem; font-weight: 600; color: var(--accent); }

/* ---- player name suggestions (own list; the browser's built-in one appeared off to the side in some browsers) ---- */
.qcombo { position: relative; }
.qsuggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); padding: 4px; }
.qsuggest[hidden] { display: none; }
.qopt { display: block; width: 100%; text-align: left; border: 0; border-radius: 8px; background: none; padding: 8px 10px; min-height: 40px; font-size: 0.92rem; }
.qopt small { color: var(--muted); margin-left: 6px; }
.qopt[aria-selected="true"], .qopt:hover { background: var(--surface-2); outline: 2px solid var(--accent-bg); outline-offset: -2px; }
.qnone { padding: 8px 10px; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 600px) { .qsuggest { min-width: 250px; } .qside:last-child .qsuggest { left: auto; right: 0; } }
.copyright { margin-top: 4px; }
.ideas-sub { margin: 18px 0 4px; }
.tag.need { background: var(--win-bg); color: var(--win); }

/* ---- Plain-number ranks + roster row layout (owner's pick 2026-11-12) ----
   Team and bye beside the name in small light gray; underneath, gray tags: his rank at his position and this
   week's opponent with the defense's rank against his position (1 = best defense). Gray only: the projection
   already counts the matchup, so it should not look like a big deal. Notes (injury, trade) go under that. */
.who { min-width: 0; }
.who .pname { min-height: 0; padding: 2px 0; }
.meta { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 3px 0 1px; }
.bdg { display: inline-block; border: 1px solid var(--edge-soft); border-radius: 10px; padding: 1px 8px; font-size: 0.76rem; background: var(--surface-2); color: var(--muted); line-height: 1.5; }
.bdg b { color: var(--text); font-weight: 700; }
.who .note { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.rk { font-size: 0.78rem; font-weight: 600; color: var(--muted); border: 1px solid var(--edge-soft); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
/* Phones: points stay on the right, the number on top and "per week" small under it, so nothing moves. */
@media (max-width: 600px) {
  .row { grid-template-columns: 30px 1fr auto auto; gap: 6px; padding: 6px 8px; }
  .ppw { text-align: right; font-size: 0.72rem; line-height: 1.2; }
  .ppw .n { display: block; font-size: 0.95rem; font-weight: 700; color: var(--text); }
  .pick { min-width: 0; padding: 6px 8px; }
}

/* ---- Team colors (owner's pick 2026-11-12: options 1 and 2, sheet in design/idea-sheets/team-colors) ----
   A two-color stripe down the left edge and a soft wash of the team's two colors behind the row (gone before the
   points and the button so they stay easy to read). No dot by the team name (too much in the box). Decoration only: never a sign of good or bad. */
& { --wash: 26%; }
@media (prefers-color-scheme: dark) { & { --wash: 34%; } }
.row.tc { --tcwash: linear-gradient(100deg, color-mix(in srgb, var(--c1) var(--wash), transparent) 0%,
          color-mix(in srgb, var(--c2) calc(var(--wash) * 0.8), transparent) 38%, transparent 72%);
          --tcstripe: linear-gradient(var(--c1) 0 50%, var(--c2) 50% 100%) left / 6px 100% no-repeat;
          background: var(--tcstripe), var(--tcwash); padding-left: 14px; }
.row.tc.picked { background: var(--tcstripe), var(--tcwash), color-mix(in srgb, var(--accent-bg) 18%, transparent); }

/* "Updated daily" line under the header (owner 2026-11-12) */
.updated { margin: 0 auto; max-width: 1040px; padding: 2px 16px 0; font-size: 0.8rem; color: var(--muted); }

/* ---- Draft grade (owner's layout 2026-11-12, design/idea-sheets/draft-grade/draft-grade-merged.png) ---- */
.dg-ctr { text-align: center; font-size: 1.1rem; margin: 0 0 10px; }
.dg-pill { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0 auto; width: fit-content; padding: 8px 22px;
  border-radius: 999px; border: 2px solid var(--accent-bg); background: color-mix(in srgb, var(--accent-bg) 16%, var(--surface)); }
.dg-pill .num { font: 800 1.9rem/1 system-ui, sans-serif; }
.dg-pill .let { font: 800 1.4rem/1 system-ui, sans-serif; color: var(--accent); }
.dg-pill.big { padding: 10px 28px; } .dg-pill.big .num { font-size: 2.6rem; } .dg-pill.big .let { font-size: 1.8rem; }
.dg-ranks { text-align: center; font-size: .9rem; color: var(--muted); margin: 8px 0 4px; }
.dg-ranks b { color: var(--text); }
.dg-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 18px 0 6px; }
.dg-h .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; display: inline; }
.dg-table tbody tr { cursor: pointer; }
.dg-table tbody tr:hover td, .dg-table tbody tr:focus td { background: color-mix(in srgb, var(--accent-bg) 10%, transparent); }
.dg-table tr.me td { font-weight: 700; background: color-mix(in srgb, var(--accent-bg) 22%, transparent); }
.dg-table td.go { color: var(--muted); width: 14px; }
.dg-mini { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.dg-mini .rp, .dg-pc .rp { font-weight: 800; color: var(--muted); }
#draftCard small { color: var(--muted); font-size: .75rem; }
.dg-more { display: block; width: 100%; margin-top: 12px; text-align: center; font-weight: 600; }
.dg-back { border: 0; background: none; color: var(--accent); padding: 4px 0; margin: 0 0 8px; font-weight: 600; min-height: 0; }
.dg-pc { border: 1px solid var(--edge-soft); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--surface); }
.dg-pt { display: flex; gap: 10px; align-items: baseline; }
.dg-pt .nm { font-weight: 700; }
.dg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 2px; }
.dg-two div { background: var(--surface-2); border-radius: 8px; padding: 6px 10px; display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; }
.dg-two span { color: var(--muted); }
.dg-still { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 8px 0 2px; }
.dg-still.ok { text-transform: none; letter-spacing: 0; }
.dg-alt { display: grid; grid-template-columns: 90px 1fr auto; gap: 6px; font-size: .86rem; padding: 3px 0; }
.dg-alt .lbl { color: var(--muted); }
.dg-kd { font-size: .84rem; color: var(--muted); margin-top: 4px; }
.dg-note { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 12px; }
@media (max-width: 480px) {
  .dg-table th, .dg-table td { padding: 6px 4px; font-size: .82rem; }
  .dg-table td.go, .dg-table th:last-child { display: none; }
  .dg-alt { grid-template-columns: 78px 1fr auto; }
}

/* ---- Tabs and one-row controls (owner 2026-11-12) ---- */
.main-tabs { max-width: 1040px; margin: 10px auto 0; padding: 0 16px; display: flex; gap: 8px; }
.main-tabs button { flex: 1; max-width: 240px; padding: 10px 14px; font-weight: 700; border-radius: 999px; }
.main-tabs button[aria-selected="true"] { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg); }
.controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 12px; align-items: end; }
.controls label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.controls label[hidden] { display: none; }
.controls select { width: 100%; min-width: 0; color: var(--text); font-size: .95rem; text-overflow: ellipsis; }
.controls .seg { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
.controls .seg-label { font-size: .8rem; color: var(--muted); margin: 0 0 4px; max-width: none; }
.controls .seg-btns { display: flex; }
.controls .seg-btns button { padding: 8px 12px; min-height: 40px; }
.draft-controls { grid-template-columns: minmax(0, 320px) 1fr; }
.tour-pill { justify-self: end; border-radius: 999px; padding: 8px 16px; font-weight: 700; border: 2px solid var(--accent-bg); background: color-mix(in srgb, var(--accent-bg) 16%, var(--surface)); color: var(--text); }
@media (max-width: 600px) {
  .controls { gap: 8px; }
  .controls select { font-size: .85rem; padding: 8px 6px; }
  .controls .seg-label { font-size: .72rem; }
  .controls .seg-btns button { padding: 6px 7px; font-size: .8rem; }
}

/* ---- Draft analysis: plain words and the "How to read this" walkthrough (owner 2026-11-12) ---- */
.dg-two b small { font-weight: 400; color: var(--muted); }
.dg-alt { grid-template-columns: 90px 1fr; align-items: start; }
.dg-alt .who { line-height: 1.45; }
.tour-shade { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tour-shade[hidden] { display: none; }
.tour-on { position: relative; z-index: 51; border-radius: 12px; box-shadow: 0 0 0 4px var(--accent-bg), 0 0 0 9999px rgba(8, 12, 18, .72) !important; background: var(--surface); }
.tour-box { pointer-events: auto; position: fixed; z-index: 52; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(520px, calc(100vw - 24px));
  background: var(--surface); color: var(--text); border: 2px solid var(--accent-bg); border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.tour-box h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.tour-box p { margin: 0 0 10px; font-size: .95rem; line-height: 1.45; }
.tour-count { color: var(--muted); font-size: .8rem !important; margin: 0 !important; }
.tour-btns { display: flex; justify-content: space-between; gap: 8px; }
.tour-btns span { display: flex; gap: 8px; }
.tour-pill { white-space: nowrap; }
@media (max-width: 600px) {
  .draft-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .tour-pill { padding: 8px 12px; font-size: .85rem; }
  .dg-two div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dg-alt { grid-template-columns: 1fr; gap: 0; }
  .dg-alt .lbl { font-size: .78rem; }
}

/* records and standings in the draft analysis (owner 2026-11-12) */
.dg-standing { text-align: center; font-size: .88rem; color: var(--muted); margin: 2px 0 6px; }
.dg-standing b { color: var(--text); }
@media (max-width: 480px) {
  .dg-table th:first-child, .dg-table td:first-child { display: none; }
}

/* ---- My stats (owner 2026-11-12, sketch design/idea-sheets/my-stats) ---- */
.ms-sub { text-align: center; font-size: .82rem; color: var(--muted); margin: 0 0 6px; }
.ms-subtabs { display: flex; gap: 2px; margin: 10px 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ms-subtabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 10px; font-weight: 700; font-size: .85rem; color: var(--muted); white-space: nowrap; min-height: 0; }
.ms-subtabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent-bg); }
.ms-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 6px; }
.ms-pills div { text-align: center; border: 2px solid var(--accent-bg); border-radius: 14px; padding: 8px 4px; background: color-mix(in srgb, var(--accent-bg) 12%, var(--surface)); }
.ms-pills b { display: block; font-size: 1.35rem; } .ms-pills span { font-size: .75rem; color: var(--muted); }
@media (max-width: 560px) { .ms-pills { grid-template-columns: repeat(2, 1fr); } }
.ms-now { text-align: center; font-size: .88rem; color: var(--muted); margin: 6px 0 2px; } .ms-now b { color: var(--text); }
.ms-facts { margin: 0; padding-left: 20px; font-size: .92rem; line-height: 1.5; } .ms-facts li { margin: 4px 0; }
.ms-tg { display: inline-block; font-size: .72rem; border: 1px solid var(--edge-soft); border-radius: 999px; padding: 1px 7px; color: var(--muted); font-weight: 600; }
.ms-tg.up { border-color: var(--win); color: var(--win); } .ms-tg.down { border-color: var(--loss); color: var(--loss); }
.ms-yby { table-layout: fixed; } .ms-yby th:nth-child(1) { width: 52%; } .ms-yby th:nth-child(2) { width: 26%; }
.ms-yby td { white-space: normal !important; overflow-wrap: anywhere; }
#statsCard small { color: var(--muted); font-size: .76rem; }
tr.ms-cur td { background: color-mix(in srgb, var(--accent-bg) 12%, transparent); }
tr.ms-good td { background: color-mix(in srgb, var(--win) 12%, transparent); } tr.ms-bad td { background: color-mix(in srgb, var(--loss) 12%, transparent); }
.ms-mix { display: grid; grid-template-columns: 34px 1fr; gap: 6px; margin: 6px 0; align-items: center; font-size: .8rem; }
.ms-mix .ml { font-weight: 700; } .ms-mix .bars { display: grid; gap: 3px; }
.ms-mix .bar { height: 19px; border-radius: 5px; display: flex; align-items: center; padding: 0 6px; white-space: nowrap; }
.ms-mix .bar.me { background: color-mix(in srgb, var(--accent-bg) 55%, transparent); } .ms-mix .bar.lg { background: var(--surface-2); color: var(--muted); }
.ms-pk { display: grid; grid-template-columns: 44px 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.5; }
.ms-pk .yr { font-weight: 800; color: var(--muted); } .ms-pk .up { color: var(--win); } .ms-pk .down { color: var(--loss); }
@media (max-width: 480px) { .main-tabs button { padding: 9px 8px; font-size: .85rem; } .ms-subtabs button { padding: 8px 7px; font-size: .8rem; } }
.ms-tg { white-space: nowrap; }
.ms-yby td.num { overflow-wrap: normal; }
.ms-yby th:nth-child(1) { width: 44%; } .ms-yby th:nth-child(2) { width: 30%; }

/* My stats: at a glance, records, playoffs, moves (owner 2026-11-12: "build both groups") */
.ms-glance, .ms-recs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 4px; }
.ms-glance div, .ms-recs div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 1px; }
.ms-glance span, .ms-recs span { font-size: .75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ms-glance b, .ms-recs b { font-size: 1.15rem; } .ms-glance small, .ms-recs small { font-size: .75rem; color: var(--muted); line-height: 1.35; }
.ms-meta { color: var(--muted); }
.ms-line { font-size: .9rem; margin: 4px 0 8px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chip { font-size: .8rem; border: 1px solid var(--edge-soft); border-radius: 999px; padding: 3px 9px; color: var(--muted); }
.ms-chip.in { border-color: var(--accent-bg); color: var(--text); background: color-mix(in srgb, var(--accent-bg) 14%, transparent); }
.ms-yby { width: 100%; }
.ms-yby th:nth-child(1) { width: 46%; } .ms-yby th:nth-child(2) { width: 20%; } .ms-yby th:nth-child(3), .ms-yby th:nth-child(4) { width: 17%; }
.ms-riv th:nth-child(1) { width: 56%; } .ms-riv th:nth-child(2), .ms-riv th:nth-child(3) { width: 22%; }
.ms-mv th:nth-child(1) { width: 18%; } .ms-mv th:nth-child(2) { width: 22%; } .ms-mv th:nth-child(3) { width: 16%; } .ms-mv th:nth-child(4) { width: 44%; }
@media (max-width: 480px) { .ms-glance, .ms-recs { gap: 6px; } .ms-glance div, .ms-recs div { padding: 7px 8px; } }
.ms-yby .nw { white-space: nowrap; }
.ms-yby th:nth-child(1) { width: 42%; } .ms-yby th:nth-child(2) { width: 24%; }
.ms-mv th:nth-child(4), .ms-mv td:nth-child(4) { padding-left: 12px; }
.ms-yby.ms-riv th:nth-child(1) { width: 56%; } .ms-yby.ms-riv th:nth-child(2), .ms-yby.ms-riv th:nth-child(3) { width: 22%; }
.ms-yby.ms-mv th:nth-child(1) { width: 18%; } .ms-yby.ms-mv th:nth-child(2) { width: 22%; } .ms-yby.ms-mv th:nth-child(3) { width: 16%; } .ms-yby.ms-mv th:nth-child(4) { width: 44%; }

/* tidy-up (owner 2026-11-12): trade tab opens with the league like the other tabs */
.grade-line { margin: -4px 0 10px; font-size: .85rem; color: var(--muted); }
details.quick > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.quick > summary::-webkit-details-marker { display: none; }
details.quick > summary h2 { margin: 0; } details.quick > summary::after { content: "Open ▸"; margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 700; }
details.quick[open] > summary::after { content: "Close ▾"; } details.quick[open] > summary { margin-bottom: 8px; }
.notice details.rules { margin-top: 6px; } .notice details.rules summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.notice details.rules small { display: block; margin-top: 4px; }

/* trophy shelf in the My stats league bar (owner 2026-11-12) */
.stats-controls { align-items: center; }
.trophies { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 420px; }
.tro-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.tro svg { width: 26px; height: 26px; display: block; }
.tro.won svg { fill: var(--accent-bg); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-bg) 55%, transparent)); }
.tro.no svg, .tro.unknown svg { fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: .75; }
.tro.now svg { fill: none; stroke: var(--accent-bg); stroke-width: 1.2; stroke-dasharray: 2 2; }
.tro-cap { font-size: .78rem; color: var(--muted); white-space: nowrap; } .tro-cap b { color: var(--text); }
@media (max-width: 560px) {
  .stats-controls { grid-template-columns: 1fr; }
  .trophies { justify-self: start; align-items: flex-start; } .tro-row { justify-content: flex-start; }
}
.tro.silver svg { fill: #C9D1D9; filter: drop-shadow(0 0 3px rgba(201, 209, 217, .5)); }
.tro.bronze svg { fill: #CD8A4B; filter: drop-shadow(0 0 3px rgba(205, 138, 75, .5)); }
/* trades (owner 2026-11-12) */
.ms-trade { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; margin: 8px 0; background: var(--surface-2); }
.mt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .9rem; } .mt-head .ms-tg { margin-left: auto; }
.mt-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mt-sides div { display: flex; flex-direction: column; gap: 1px; font-size: .88rem; }
.mt-sides span { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mt-sides small { color: var(--muted); font-size: .76rem; }
@media (max-width: 420px) { .mt-sides { grid-template-columns: 1fr; gap: 6px; } }

/* playoff bracket (owner 2026-11-12) */
.bk-years { margin: 6px 0 8px; } .bk-years button { cursor: pointer; background: none; font: inherit; }
.bk-wrap { overflow-x: auto; padding-bottom: 4px; }
.bk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(165px, 1fr); gap: 10px; align-items: center; min-width: min-content; }
.bk { align-items: stretch; } .bk-col { display: flex; flex-direction: column; gap: 6px; }
.bk-gs { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.bk-h { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.bk-h small { font-weight: 600; text-transform: none; letter-spacing: 0; }
.bk-g { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.bk-t { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; font-size: .82rem; color: var(--muted); }
.bk-t + .bk-t { border-top: 1px solid var(--line); }
.bk-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-t b { font-variant-numeric: tabular-nums; }
.bk-t.win { color: var(--text); font-weight: 700; }
.bk-t.me, .bk-place .me, .bk-bye .me { background: color-mix(in srgb, var(--accent-bg) 20%, transparent); }
.bk-note { display: block; padding: 2px 8px 4px; font-size: .7rem; color: var(--muted); }
.bk-bye { font-size: .75rem; color: var(--muted); }
.bk-cup { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px; border: 2px solid var(--accent-bg); border-radius: 12px; }
.bk-cup svg { width: 38px; height: 38px; fill: var(--accent-bg); } .bk-cup b { font-size: .88rem; }
.bk-cup.me { background: color-mix(in srgb, var(--accent-bg) 22%, transparent); }
.bk-place { margin-top: 8px; display: grid; gap: 4px; font-size: .82rem; color: var(--muted); }
.bk-place div { padding: 3px 6px; border-radius: 6px; } .bk-place span { font-weight: 700; color: var(--text); } .bk-place b { color: var(--text); }
.ms-pg b.up { color: var(--win); } .ms-pg b.down { color: var(--loss); }
.ms-yby.ms-pg th:nth-child(1) { width: 34%; } .ms-yby.ms-pg th:nth-child(2) { width: 40%; } .ms-yby.ms-pg th:nth-child(3) { width: 26%; }
@media (max-width: 480px) { .ms-subtabs button { padding: 8px 5px; font-size: .76rem; } }
@media (max-width: 480px) { .ms-subtabs { gap: 0; justify-content: space-between; } .ms-subtabs button { padding: 8px 3px; font-size: .74rem; letter-spacing: -.01em; } }
.bk-swipe { display: none; font-size: .75rem; color: var(--muted); margin: 0 0 4px; }
@media (max-width: 720px) { .bk-swipe { display: block; } }

/* Home page and the pages around it (owner 2026-11-12) */
a.brand { color: inherit; text-decoration: none; }
.league-bar { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 6px; font-size: .88rem; }
.more-line { font-size: .84rem; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.home-leagues { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.lc { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px 12px; font: inherit; font-size: .84rem; line-height: 1.4; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 1px; position: relative; }
.lc:hover { border-color: var(--accent-bg); }
.lc b.n { font-size: 1rem; padding-right: 52px; } .lc small { color: var(--muted); }
.lc .recl { margin-top: 4px; } .lc .rec { font-weight: 800; font-size: 1.1rem; }
.lc .site { position: absolute; top: 9px; right: 10px; font-size: .7rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; color: var(--muted); }
.lc.all { border: 2px solid var(--accent-bg); background: color-mix(in srgb, var(--accent-bg) 10%, var(--surface)); }
.lc .cupline { margin-top: 2px; }
.hidden-link { font-size: .84rem; color: var(--muted); margin: 8px 0 0; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pil { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px; font-size: .84rem; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; }
.pil:hover { border-color: var(--accent-bg); }
.pil h3 { margin: 0; font-size: 1.05rem; }
.st { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; align-self: flex-start; display: inline-block; }
.st.on { background: color-mix(in srgb, var(--win) 18%, transparent); color: var(--win); border: 1px solid var(--win); }
.st.soon { border: 1px solid var(--line); color: var(--muted); }
.pil ul { margin: 0; padding-left: 16px; color: var(--muted); }
.pil .go { margin-top: auto; font-weight: 800; color: var(--accent); }
.typein { margin-top: 10px; border: 1px dashed var(--edge-soft, #8A8173); border-radius: 12px; padding: 10px 12px; font-size: .86rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-link { border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-weight: 700; color: var(--text); text-decoration: none; background: var(--surface); white-space: nowrap; }
.ad-space { margin: 16px 0 6px; border: 2px dashed var(--edge-soft, #8A8173); border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.site-card { margin-top: 8px; } .site-card h2 { margin-top: 0; }
.read { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 10px 12px; font-size: .86rem; line-height: 1.5; margin: 8px 0; }
.read b { display: block; margin-bottom: 2px; }
.steps3 { counter-reset: s; margin: 8px 0; padding: 0; list-style: none; font-size: .88rem; }
.steps3 li { counter-increment: s; display: flex; gap: 8px; margin: 7px 0; line-height: 1.4; }
.steps3 li::before { content: counter(s); flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-ink); font-weight: 800; text-align: center; font-size: .8rem; line-height: 22px; }
.btn-big { display: block; width: 100%; text-align: center; background: var(--accent-bg); color: var(--accent-ink); border: 0; border-radius: 12px; padding: 12px; font: inherit; font-weight: 800; text-decoration: none; margin: 10px 0 6px; cursor: pointer; }
.demo-note { font-size: .8rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 8px; }
.ck { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ck .box { flex: 0 0 24px; height: 24px; border-radius: 6px; border: 2px solid var(--accent-bg); background: var(--accent-bg); color: var(--accent-ink); font-weight: 900; padding: 0; min-height: 0; cursor: pointer; }
.ck .box.off { background: none; border-color: var(--muted); }
.ck small { display: block; color: var(--muted); font-size: .76rem; }
.ck .eye { margin-left: auto; font-size: .76rem; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); background: none; min-height: 0; cursor: pointer; white-space: nowrap; }
.ck .eye.hid { border-color: #D98A2B; color: #D98A2B; } .ck .eye.off { cursor: default; border-style: dashed; }
.warnbox { border-left: 4px solid #D98A2B; background: color-mix(in srgb, #D98A2B 12%, var(--surface)); border-radius: 8px; padding: 9px 11px; font-size: .84rem; line-height: 1.45; margin: 10px 0; }
.hl { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.hl small { display: block; color: var(--muted); font-size: .76rem; }
.pill2 { font-size: .78rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--surface); min-height: 0; cursor: pointer; white-space: nowrap; }
.ms-yby.ms-all th:nth-child(1) { width: 40%; } .ms-yby.ms-all th:nth-child(2) { width: 22%; } .ms-yby.ms-all th:nth-child(3), .ms-yby.ms-all th:nth-child(4) { width: 19%; }
@media (max-width: 720px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-leagues { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; padding-bottom: 4px; } }
.league-bar[hidden], .main-tabs[hidden], .view[hidden] { display: none !important; }
.league-bar { max-width: 1040px; margin: 6px auto 0; padding: 0 16px; box-sizing: border-box; }

/* Type in a league (owner 2026-11-12) */
.ti h2 { margin: 4px 0 8px; }
.ti-steps { display: flex; gap: 4px; margin: 2px 0 8px; } .ti-steps span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); } .ti-steps span.on { background: var(--accent-bg); }
.stepname { font-size: .76rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ti label.f, .ti span.f { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin: 12px 0 5px; }
.ti-in { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; border: 1px solid var(--edge-soft, var(--line)); border-radius: 10px; padding: 9px 11px; background: var(--surface); color: var(--text); font: inherit; }
.ti .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ti .chip { border: 1px solid var(--edge-soft, var(--line)); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: .88rem; background: var(--surface); color: var(--text); min-height: 0; cursor: pointer; }
.ti .chip.on { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-ink); font-weight: 800; }
.ti-tip { border-left: 4px solid var(--accent-bg); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-size: .84rem; margin: 12px 0; line-height: 1.45; }
.ti-tip b { display: block; margin-bottom: 2px; }
.ti-more { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin-top: 10px; } .ti-more summary { cursor: pointer; font-weight: 700; }
.ti .slot { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.ti .slot small { display: block; color: var(--muted); font-size: .74rem; }
.ti .step { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.ti .step button { width: 36px; min-height: 30px; border: 0; border-radius: 0; background: var(--surface-2); font-weight: 900; padding: 0; color: var(--text); }
.ti .step b { width: 34px; text-align: center; }
.ti-rec { display: grid; grid-template-columns: 90px 90px 1fr; gap: 8px; align-items: end; } .ti-rec .hint { margin: 0 0 10px; font-size: .78rem; }
.ti .count { font-size: .8rem; color: var(--muted); margin: 6px 0; }
.ti .pl { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 5px 6px 5px 10px; margin: 5px 0; background: var(--surface); font-size: .88rem; }
.ti .pl small { color: var(--muted); } .ti .pl .x { border: 0; background: none; color: var(--muted); min-height: 0; padding: 4px 8px; }
.ti .paste { border: 1px dashed var(--edge-soft, var(--line)); border-radius: 10px; padding: 9px 11px; font-size: .84rem; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.ti .paste b { color: var(--text); } .ti .paste textarea { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; padding: 8px; }
.ti-msg { color: var(--text); font-size: .84rem; } .ti-msg.warn { color: #D98A2B; } .ti-msg .chip { margin: 3px 2px; }
.ti .team { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.ti .team small { color: var(--muted); display: block; font-size: .76rem; }
.ti .tag { font-size: .76rem; border-radius: 999px; padding: 3px 11px; border: 1px solid var(--line); color: var(--muted); background: none; min-height: 0; cursor: pointer; white-space: nowrap; }
.ti .tag.ok { border-color: var(--win); color: var(--win); } .ti .tag.me { border-color: var(--accent-bg); background: color-mix(in srgb, var(--accent-bg) 25%, transparent); color: var(--text); cursor: default; }
.ti-editor { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 12px; margin: 6px 0 10px; background: var(--surface-2); }
.ti-btns { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.btn-p { background: var(--accent-bg); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 800; cursor: pointer; }
.btn-p[disabled] { opacity: .45; cursor: not-allowed; }
.btn-s { border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 700; background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; }
.ti .saved { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 12px; }
.lc.typed .warn { display: block; margin-top: 5px; color: #D98A2B; font-weight: 700; font-size: .78rem; }
.linkish { border: 0; background: none; color: var(--muted); text-decoration: underline; font: inherit; font-size: .8rem; cursor: pointer; min-height: 0; padding: 0; }
.ti-need { border-left: 4px solid #D98A2B; background: color-mix(in srgb, #D98A2B 12%, var(--surface)); border-radius: 8px; padding: 9px 11px; font-size: .86rem; line-height: 1.45; margin: 6px 0 10px; }
.ti-need b { display: block; }
.ti-progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; } .ti-progress span { display: block; height: 100%; background: var(--accent-bg); }
.ti-count { font-size: .86rem; margin: 6px 0 4px; }
.ti .tag.warn { border-color: #D98A2B; color: #D98A2B; cursor: default; margin-right: 4px; }
.ti-later { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .ti-later .hint { margin: 0; font-size: .8rem; }
/* full scoring list in Type in a league (owner 2026-11-12) */
.ti-more summary small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.ti-sg { margin: 14px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ti-sg small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ti-sr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.ti-sr small { color: var(--muted); font-size: .74rem; display: block; }
.ti-sr input { width: 84px; flex: 0 0 84px; text-align: right; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); color: var(--text); font: inherit; }
.ti-br { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.ti-br > span:first-child { flex: 1 0 100%; font-weight: 600; }
.ti-bp { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; } .ti-bp small { color: var(--muted); font-size: .72rem; }
.ti-bp input { width: 62px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: var(--surface); color: var(--text); font: inherit; text-align: right; }

/* ---- This week tab (owner 2026-11-12, sketch design/idea-sheets/this-week) ---- */
.wk-h { font: 700 1.25rem Georgia, serif; margin: 2px 0 2px; }
.wk-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.wk-box.ok { border-left: 4px solid var(--win); } .wk-box.go { border-left: 4px solid var(--accent-bg); }
.wk-box .hint { margin: 4px 0 0; }
.wk-verdict { font-weight: 800; font-size: 1rem; color: var(--win); } .wk-box.go .wk-verdict, .wk-verdict.plain { color: var(--text); }
.wk-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; font-size: .88rem; line-height: 1.6; }
.wk-moves span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.wk-moves small, .wk-row small, .wk-pick small { color: var(--muted); }
.wk-warn { color: #D98A2B; font-weight: 700; font-size: .86rem; }
.wk-sec { margin-top: 14px; }
.wk-sec h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: .98rem; margin: 0 0 4px; }
.wk-sec h3 small { font-weight: 600; color: var(--muted); font-size: .76rem; }
table.wk-lu { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.wk-lu td { padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: top; }
table.wk-lu td.s { width: 64px; font-weight: 800; color: var(--muted); font-size: .76rem; white-space: nowrap; }
table.wk-lu td.p { width: 48px; text-align: right; font-weight: 800; }
table.wk-lu small { display: block; color: var(--muted); font-size: .76rem; }
.wk-tag { display: inline-block; font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 0 7px; margin-left: 4px; vertical-align: 1px; }
.wk-tag.q { background: #F5D98A; color: #5A4300; } .wk-tag.o { background: #E7A1A1; color: #5A0F0F; } .wk-tag.n { background: #B9D6F2; color: #10304F; }
.wk-row { padding: 7px 0; border-top: 1px solid var(--line); font-size: .88rem; line-height: 1.45; }
.wk-row small { display: block; font-size: .78rem; } .wk-row .news { display: block; font-style: italic; }
.wk-row b.w { color: var(--win); }
.wk-pick { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.wk-pick .g { color: var(--win); font-weight: 800; } .wk-pick .why { grid-column: 1 / -1; font-size: .78rem; }
.wk-rec { margin-top: 16px; font-size: .86rem; line-height: 1.5; } .wk-rec summary { cursor: pointer; font-weight: 700; }
.lc .wk-line { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-weight: 700; font-size: .8rem; }
.wk-pick .vs { grid-column: 1 / -1; font-size: .78rem; } .wk-pick .vs.news { font-style: italic; }

}
.fpf-quick.is-light { --bg: #FBF7F0; --surface: #FFFFFF; --surface-2: #F3EDE2; --text: #16202B; --muted: #5B6672; --line: #E2D9CA; --accent: #9A6410; --accent-bg: #F2B544; --accent-ink: #16202B; --win: #007A59; --win-bg: #DCF3EA; --loss: #B34E00; --loss-bg: #FBE6D6; --even: #5B6672; --even-bg: #ECE7DD; --edge: #8C7D66; --edge-soft: #BFB29C; --lift: 0 1px 4px rgba(22, 32, 43, 0.10); --wash: 26%; color-scheme: light; }
.fpf-quick.is-dark { --bg: #16202B; --surface: #1E2B38; --surface-2: #263545; --text: #F2EDE4; --muted: #A9B4BF; --line: #33455A; --accent: #F2B544; --accent-bg: #F2B544; --accent-ink: #16202B; --win: #2ECC9A; --win-bg: #173A36; --loss: #FF8A4C; --loss-bg: #432A1E; --even: #A9B4BF; --even-bg: #2A3847; --edge: #6B819A; --edge-soft: #4A5E75; --lift: 0 1px 4px rgba(0, 0, 0, 0.35); --wash: 34%; color-scheme: dark; }
.fpf-quick { background: transparent; text-align: left; }
.fpf-quick .pname.plain { text-decoration: none; font-weight: 600; }
.fpf-quick .qchip .pname.plain small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; }