/* /best-memecoin-trading-settings: the answer is the first screen. One real table, a situation per row and a
   setting per column. On a narrow screen the table scrolls sideways inside its own region and the situations stay
   put. On top of /paper-trading/paper-trading.css. No script. */

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

.bs-scroll{ margin:36px 0 0; 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; }
.bs-scroll:focus-visible{ outline:2px solid var(--p); outline-offset:3px; }
.bs{ width:100%; min-width:980px; table-layout:fixed; border-collapse:separate; border-spacing:0; font:500 13.5px/1.35 var(--sans); color:var(--soft); }
.bs 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); }
.bs th, .bs td{ padding:13px 14px; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
.bs thead th{ border-top:0; padding-top:14px; font:600 12.5px/1.25 var(--sans); color:var(--muted); }
.bs thead th:first-child{ width:196px; }
.bs tbody th{ font:700 14.5px/1.3 var(--sans); color:var(--w); }
.bs tbody th small{ display:block; margin-top:3px; font:500 12px/1.3 var(--sans); color:var(--muted); }
/* the situations stay put while the rest scrolls */
.bs thead th:first-child, .bs tbody th{ position:sticky; left:0; z-index:1; background:var(--card); box-shadow:1px 0 0 var(--line); }
.bs td b{ display:block; font-weight:700; color:var(--w); }
.bs td b + span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--muted); }
/* the row to start from: lit, with the green edge the app uses for the thing you are on */
.bs tr.us th, .bs tr.us td{ background:#0f1a1a; }
.bs tr.us th{ box-shadow:inset 3px 0 0 var(--g), 1px 0 0 var(--line); }
/* the names table: five columns, our own column lit */
.bs.names{ min-width:900px; }
.bs.names thead th:first-child{ width:172px; }
.bs.names td:nth-child(2){ background:#0f1a1a; }

.bs-key{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 24px; font:500 13px/1.5 var(--sans); color:var(--muted); }
.bs-key b{ color:var(--soft); font-weight:600; }

/* sources: each terminal, what it has, and where that was read */
.bs-src{ margin:32px 0 0; padding:0; list-style:none; display:grid; gap:0; max-width:60em; }
.bs-src li{ padding:16px 0; border-top:1px solid var(--line); }
.bs-src li:last-child{ border-bottom:1px solid var(--line); }
.bs-src h3{ margin:0 0 6px; font:700 17px/1.3 var(--sans); }
.bs-src p{ margin:0; font:500 14.5px/1.6 var(--sans); color:var(--soft); }
.bs-src p + p{ margin-top:6px; font-size:13px; color:var(--muted); }
.bs-src a{ color:var(--soft); text-underline-offset:3px; text-decoration-color:var(--line-hi); overflow-wrap:anywhere; }
.bs-src a:hover{ color:var(--w); }
.bs-left{ margin-top:16px; }

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