/* /best-memecoin-trading-apps: the comparison is the first screen. One real table, apps down the side and the
   things that decide a pick across the top, clusterz in the first row. On a narrow screen the table scrolls
   sideways inside its own region and the app names stay put. On top of /paper-trading/paper-trading.css. No script. */

.cmp-hero h1{ max-width:14em; }
.cmp-hero .lede{ max-width:44em; }
.cmp-us{ margin:16px 0 0; max-width:46em; font:500 15px/1.55 var(--sans); color:var(--muted); }

/* wider than the text column: up to 1600px, centred on the page, so most desktop screens see every column */
.cmp-scroll{ --cmp-w:min(calc(100vw - 2 * var(--gut)), 1600px); width:var(--cmp-w); margin:36px 0 0 calc((100% - var(--cmp-w)) / 2); overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--line-hi); border-radius:16px;
  background:var(--card); scrollbar-color:var(--line-hi) transparent; }
.cmp-scroll:focus-visible{ outline:2px solid var(--p); outline-offset:3px; }
.cmp{ width:100%; min-width:1480px; table-layout:fixed; border-collapse:separate; border-spacing:0; font:500 13.5px/1.35 var(--sans); color:var(--soft); }
.cmp caption{ caption-side:top; padding:14px 16px; text-align:left; font:500 13px/1.45 var(--sans); color:var(--muted); border-bottom:1px solid var(--line); }
.cmp th, .cmp td{ padding:12px 12px; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
.cmp thead th{ width:133px; border-top:0; padding-top:14px; font:600 12.5px/1.25 var(--sans); color:var(--muted); }
.cmp thead th:first-child{ width:150px; }
.cmp tbody th{ font:700 14.5px/1.3 var(--sans); color:var(--w); white-space:nowrap; }
.cmp tbody th small{ display:block; margin-top:2px; font:500 12px/1.3 var(--sans); color:var(--muted); white-space:normal; max-width:12em; }
/* the app names stay put while the rest scrolls */
.cmp thead th:first-child, .cmp tbody th{ position:sticky; left:0; z-index:1; background:var(--card); box-shadow:1px 0 0 var(--line); }
/* our row: lit, with the green edge the app uses for the thing you are on */
.cmp tr.us th, .cmp tr.us td{ background:#0f1a1a; }
.cmp tr.us th{ box-shadow:inset 3px 0 0 var(--g), 1px 0 0 var(--line); }
.cmp tr.us td{ color:var(--w); }

/* a mark is a word with a sign before it, so it never rests on colour alone */
.mk{ display:flex; align-items:flex-start; gap:7px; }
.mk::before{ flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font:800 11px/1 var(--sans); }
.mk.y{ color:var(--w); }
.mk.y::before{ content:"\2713"; background:var(--g); color:#fff; }
.mk.p{ color:var(--soft); }
.mk.p::before{ content:""; box-sizing:border-box; border:2px solid var(--g); background:linear-gradient(90deg, var(--g) 50%, transparent 50%); }
.mk.n::before{ content:"\2212"; background:transparent; border:1px solid var(--line-hi); color:var(--muted); }
.mk.n{ color:var(--muted); }
.mk.u::before{ content:"?"; background:transparent; border:1px dashed var(--line-hi); color:var(--muted); }
.mk.u{ color:var(--muted); }
.cmp td b{ display:block; font-weight:700; color:var(--w); }
.cmp td .mk + span, .cmp td b + span{ display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.cmp td .mk + span{ padding-left:25px; }

.cmp-key{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px 24px; font:500 13px/1.45 var(--sans); color:var(--muted); }
.cmp-key li{ display:flex; align-items:center; gap:8px; }
.cmp-key .mk{ display:inline-flex; align-items:center; }

/* picks: one need, the apps that meet it */
.cmp-picks{ margin:36px 0 0; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:800px){ .cmp-picks{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cmp-picks > div{ padding:22px 24px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.cmp-picks h3{ margin:0 0 8px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.cmp-picks p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); }
.cmp-picks b{ color:var(--w); }

/* sources: each app, a line on what it is, and where every fact came from */
.cmp-src{ margin:36px 0 0; padding:0; list-style:none; display:grid; gap:0; max-width:60em; }
.cmp-src li{ padding:18px 0; border-top:1px solid var(--line); }
.cmp-src li:last-child{ border-bottom:1px solid var(--line); }
.cmp-src h3{ margin:0 0 6px; font:700 17px/1.3 var(--sans); }
.cmp-src p{ margin:0; font:500 14.5px/1.6 var(--sans); color:var(--soft); }
.cmp-src p + p{ margin-top:6px; font-size:13px; color:var(--muted); }
.cmp-src a{ color:var(--soft); text-underline-offset:3px; text-decoration-color:var(--line-hi); overflow-wrap:anywhere; }
.cmp-src a:hover{ color:var(--w); }

@media (max-width:699.98px){
  .cmp-scroll{ --cmp-w:100vw; margin-left:calc(-1 * var(--gut)); border-radius:0; border-left:0; border-right:0; }
  .cmp{ min-width:1400px; font-size:13px; }
  .cmp thead th:first-child{ width:124px; }
  .cmp tbody th{ font-size:13.5px; }
  .cmp th, .cmp td{ padding:11px 12px; }
}