/* Trade alert landing (/trades/:trader).
   The memorable element is the filing: a facsimile of the House Clerk form
   stamped in clerk's red, turning into the plain-English alert. Everything
   else stays quiet and uses the app's tokens. The paper stays light in dark
   mode on purpose — it's a document laid on the page. */

.tl {
  min-width: 0;
  --tl-paper: #f6f7f9;
  --tl-paper-ink: #1d2f4a;
  --tl-paper-rule: #c9d2dd;
  --tl-stamp: #c2362b;

  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) 1rem 4rem;
  display: grid;
  gap: clamp(3rem, 7vw, 5.5rem);
}

/* Hero ------------------------------------------------------------------ */

.tl-hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .tl-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3.5rem;
  }
}

.tl-hero__copy {
  display: grid;
  gap: 1.25rem;
  max-width: 32rem;
}

.tl-hero__title {
  margin: 0;
  font-size: clamp(2.3rem, 5.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.tl-hero__lead {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 34em;
}

/* "Updated <date>" under a page's lead: trader pages and the stock header. */
.page-updated {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 40em;
}

/* Signup form ----------------------------------------------------------- */

.tl-form {
  display: grid;
  gap: 0.45rem;
  max-width: 28rem;
}

/* Same voice as .tl-holdings__prices: supporting copy under the form
   prompt, not a second card. */
.tl-form__sample {
  margin: 0 0 0.15rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.tl-form__sample-title {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.tl-form__sample ul {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}

.tl-form__sample li + li {
  margin-top: 0.15rem;
}

.tl-form__sample p {
  margin: 0.15rem 0 0;
}

.tl-form__label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.tl-form__row {
  display: flex;
  gap: 0.5rem;
}

.tl-form__email {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

.tl-form__submit {
  flex: 0 0 auto;
  padding: 0.7rem 1.15rem;
  border: 0;
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.tl-form__submit:hover {
  filter: brightness(1.08);
}

.tl-form__email:focus-visible,
.tl-form__submit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Full-width link to the portfolio page under the hero form: outlined so
   the solid "Get alerts" stays the primary action. */
.tl-portfolio-button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* Portfolio header: the member's rank and a way to the leaderboard, under
   the signup (same outline button as "View … Portfolio" on the alert page). */
.tl-portfolio__board {
  margin-top: 1rem;
}

.tl-portfolio__rank {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.tl-portfolio-button:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tl-portfolio-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* The exhibit: filing → alert ------------------------------------------- */

.tl-exhibit {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.tl-filing {
  position: relative;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--tl-paper-rule);
  border-radius: 3px;
  background: var(--tl-paper);
  color: var(--tl-paper-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.45;
  box-shadow: 0 1px 0 var(--tl-paper-rule), 0 18px 40px -28px rgb(29 47 74 / 0.55);
}

.tl-filing__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--tl-paper-ink);
  font-weight: 500;
}

.tl-filing__filer {
  margin: 0.55rem 0 0.4rem;
}

.tl-filing__table {
  width: 100%;
  border-collapse: collapse;
}

.tl-filing__table th {
  padding: 0.3rem 0.35rem 0.3rem 0;
  border-bottom: 1px solid var(--tl-paper-rule);
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
}

.tl-filing__table td {
  padding: 0.45rem 0.35rem 0.45rem 0;
  border-bottom: 1px dashed var(--tl-paper-rule);
  vertical-align: top;
}

.tl-filing__table .tl-filing__num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tl-filing__more td {
  color: color-mix(in srgb, var(--tl-paper-ink) 60%, transparent);
}

/* Trump's reports are scans: grey bars stand in for the unreadable table so
   the exhibit doesn't invent rows. */
.tl-filing__scan {
  display: grid;
  gap: 0.45rem;
  margin: 0.7rem 0 0.2rem;
}

.tl-filing__scan span {
  height: 0.5rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tl-paper-ink) 14%, transparent);
}

.tl-filing__scan span:nth-child(3n + 1) { width: 92%; }
.tl-filing__scan span:nth-child(3n + 2) { width: 78%; }
.tl-filing__scan span:nth-child(3n) { width: 85%; }

.tl-filing__desc {
  margin: 0.55rem 0 0;
  max-width: 44ch;
  padding-right: 7.5rem; /* keeps the stamp clear of the text */
}

/* Phones: stack each filing row (asset on its own line, then owner / type /
   date / amount) instead of squeezing five columns into ~350px. */
@media (max-width: 34rem) {
  .tl-filing__table thead {
    display: none;
  }

  .tl-filing__table tr {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    column-gap: 0.9rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--tl-paper-rule);
  }

  .tl-filing__table td {
    padding: 0;
    border: 0;
  }

  .tl-filing__table .tl-filing__wide {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0.15rem;
  }

  .tl-filing__table td:last-child {
    justify-self: end;
  }
}

.tl-stamp {
  position: absolute;
  right: 1.1rem;
  bottom: 0.9rem;
  padding: 0.3rem 0.55rem;
  border: 2px solid var(--tl-stamp);
  border-radius: 4px;
  color: var(--tl-stamp);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.06em;
  opacity: 0.88;
  transform: rotate(-7deg);
  animation: tl-stamp 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 350ms both;
}

@keyframes tl-stamp {
  from {
    opacity: 0;
    transform: rotate(-7deg) scale(1.6);
  }
  to {
    opacity: 0.88;
    transform: rotate(-7deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-stamp {
    animation: none;
  }
}

.tl-exhibit__becomes {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.tl-alert {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-raised);
  display: grid;
  gap: 0.7rem;
}

.tl-alert__subject {
  margin: 0;
  font-weight: 600;
}

.tl-alert__trades {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.tl-alert__trades li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.1rem;
  font-size: 0.92rem;
}

.tl-alert__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.tl-alert__detail {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
}

.tl-alert a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

.tl-alert__timing {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
}

/* Estimated holdings ---------------------------------------------------- */

.tl-holdings {
  display: grid;
  gap: 0.9rem;
}

.tl-holdings .tl-section-title {
  margin: 0;
}

.tl-holdings__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.tl-holdings__table thead th {
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: left;
}

.tl-holdings__table tbody th,
.tl-holdings__table td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: baseline;
}

.tl-holdings__table tbody th {
  font-weight: 400;
  white-space: nowrap;
}

.tl-holdings__ticker {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.tl-holdings__ticker:hover {
  text-decoration: underline;
}

.tl-holdings__kind {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.tl-holdings__value {
  white-space: nowrap;
}

.tl-holdings__change {
  color: var(--muted);
}

.tl-holdings__prices {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 70ch;
}

.tl-holdings__weight {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Top-10 weight bars: widths are relative to the heaviest position. */
.tl-weights {
  margin: 0 0 0.5rem;
  display: grid;
  gap: 0.6rem;
  max-width: 40rem;
}

.tl-weights__caption {
  color: var(--muted);
  font-size: 0.85rem;
}

.tl-weights__bars {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.tl-weights__bars li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.tl-weights__ticker {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.tl-weights__ticker:hover {
  text-decoration: underline;
}

.tl-weights__track {
  display: block;
  height: 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
}

.tl-weights__bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.tl-weights__pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.tl-holdings__return {
  white-space: nowrap;
}

.tl-return {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tl-return--gain { color: var(--gain); }
.tl-return--loss { color: var(--loss); }

.tl-return__base,
.tl-return__extra {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: normal;
}

.tl-return__base {
  display: inline;
  margin-left: 0.3rem;
}

/* Phones: "Since then" drops under the ticker instead of squeezing a third
   column in. */
@media (max-width: 34rem) {
  .tl-holdings__table thead th:nth-child(n + 3) {
    display: none;
  }

  .tl-holdings__weight {
    display: none;
  }

  .tl-holdings__table,
  .tl-holdings__table thead,
  .tl-holdings__table tbody {
    display: block;
  }

  .tl-holdings__table thead tr {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }

  .tl-holdings__table thead th {
    border: 0;
  }

  .tl-holdings__table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
  }

  .tl-holdings__table tbody th,
  .tl-holdings__table td {
    padding: 0;
    border: 0;
  }

  .tl-holdings__value {
    text-align: right;
  }

  .tl-holdings__return,
  .tl-holdings__change:not(:empty) {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    white-space: normal;
  }

}

/* Recent moves teaser (alert page) -------------------------------------- */

.tl-recent {
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
}

.tl-recent .tl-section-title {
  margin: 0;
}

.tl-recent__trades,
.tl-history__trades {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-recent__trades li,
.tl-history__trades li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.tl-recent__amount,
.tl-history__amount {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tl-recent__when,
.tl-history__detail {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.tl-recent__more {
  margin: 0;
  font-size: 0.95rem;
}

.tl-recent__more a,
.tl-portfolio__crumb a,
.tl-history__date a,
.tl-method a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent);
  text-underline-offset: 0.2em;
}

.tl-recent__more a:hover,
.tl-portfolio__crumb a:hover,
.tl-history__date a:hover,
.tl-method a:hover {
  text-decoration-color: currentColor;
}

.tl-stock-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent);
  text-underline-offset: 0.2em;
}

.tl-stock-link:hover {
  text-decoration-color: currentColor;
}

/* Portfolio page -------------------------------------------------------- */

.tl--portfolio {
  max-width: 56rem;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.tl-portfolio__header {
  display: grid;
  gap: 1rem;
}

.tl-portfolio__crumb {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.tl-portfolio__title {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
}

.tl-portfolio__signup {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tl-portfolio__signup-title {
  margin: 0;
  font-weight: 600;
}

.tl-history {
  display: grid;
  gap: 1.5rem;
}

.tl-history .tl-section-title {
  margin: 0;
}

.tl-history__date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0 0 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 600;
}

.tl-history__date a {
  font-size: 0.85rem;
  font-weight: 400;
}

.tl-method {
  display: grid;
  gap: 0.75rem;
  max-width: 64ch;
}

.tl-method .tl-section-title {
  margin: 0;
}

.tl-method p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.tl-portfolio__disclaimer {
  margin-top: -1.5rem;
}

/* Facts, FAQ, closing --------------------------------------------------- */

.tl-facts {
  display: grid;
  gap: 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 48rem) {
  .tl-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.tl-fact__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tl-fact p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 36ch;
}

.tl-section-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.tl-faq__list {
  margin: 0;
  display: grid;
  gap: 1.25rem 3rem;
  max-width: 60rem;
}

@media (min-width: 48rem) {
  .tl-faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tl-faq__list dt {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.tl-faq__list dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 44ch;
}

.tl-closing {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

.tl-others {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-top: -2.5rem;
  font-size: 0.9rem;
}

.tl-others__title {
  margin: 0;
  color: var(--muted);
}

.tl-others ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-others a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent);
  text-underline-offset: 0.2em;
}

.tl-others a:hover {
  text-decoration-color: currentColor;
}

.tl-disclaimer {
  margin: -2.5rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 60ch;
}

/* Congress leaderboard (/congress). */
.tl-board {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.tl-board thead th {
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: left;
}

.tl-board tbody th,
.tl-board td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: baseline;
}

.tl-board tbody th {
  font-weight: 400;
  white-space: nowrap;
}

.tl-board .tl-holdings__kind {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.tl-board__rank,
.tl-board__benchmark,
.tl-board__buys {
  color: var(--muted);
}

.tl-board__best .tl-return {
  margin-left: 0.35rem;
}

.tl-board__unranked ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
}

.tl-board__unranked a,
.tl-board-link a {
  color: var(--link);
}

.tl-board-link {
  margin: 0;
}

.tl-board__followed {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Fund portfolio (/trades/:fund/portfolio): five columns, so on phones the
   table scrolls in its box rather than squeezing. */
.tl-fund-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tl-fund-holdings {
  width: 100%;
  min-width: 34rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.tl-fund-holdings__holding {
  width: 28%;
}

/* Next-13F signup, between the top 10 holdings and the rest. */
.tl-fund-next {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.tl-fund-next__title {
  margin: 0 0 0.75rem;
  font-weight: 600;
  line-height: 1.45;
}

.tl-fund-holdings thead th {
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.tl-fund-holdings tbody th,
.tl-fund-holdings td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.tl-fund-holdings tbody th {
  font-weight: 400;
}

.tl-fund-holdings .tl-holdings__kind {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.tl-fund-sold ul {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.7;
}

/* Congress signup: how often. */
.tl-form__frequency {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.tl-form__frequency legend {
  width: 100%;
  margin-bottom: 0.25rem;
}

.tl-form__frequency-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* "Change how often" page: one button per choice. */
.tl-frequency {
  display: grid;
  gap: 0.6rem;
  max-width: 32rem;
}

.tl-frequency__choice {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tl-frequency__choice span {
  color: var(--muted);
  font-size: 0.85rem;
}

.tl-frequency__choice.is-current {
  border-color: var(--text);
}

/* Phones: rank, member and return on one line; the S&P comparison and best
   pick drop underneath instead of squeezing six columns in. */
@media (max-width: 34rem) {
  .tl-board thead {
    display: none;
  }

  .tl-board,
  .tl-board tbody {
    display: block;
  }

  .tl-board tbody tr {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    column-gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
  }

  .tl-board tbody th,
  .tl-board td {
    padding: 0;
    border: 0;
  }

  .tl-board__return {
    text-align: right;
  }

  .tl-board__benchmark,
  .tl-board__buys,
  .tl-board__best {
    grid-column: 2 / -1;
    font-size: 0.8rem;
  }

  .tl-board__benchmark::before {
    content: "S&P 500 same dates: ";
  }

  .tl-board__buys::after {
    content: " stock buys";
  }
}

/* /trade-alerts: Scout's positions and trade log. Seven columns don't
   restack like the leaderboard, so on phones the table scrolls in its box. */
.scout-summary {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

.scout-summary strong {
  color: var(--text);
}

.scout-follow {
  display: inline-block;
  margin-top: 0.5rem;
  text-decoration: none;
}

.scout-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.scout-table thead th {
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.scout-table tbody th,
.scout-table td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.scout-table tbody th {
  font-weight: 400;
}

.scout-table .tl-holdings__kind {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

/* /congress: the quotable answer, freshness line and FAQ. */
.tl-board__answer {
  margin: 0.75rem 0 0;
  font-weight: 600;
  line-height: 1.45;
}

.tl-board__updated {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.tl-board__faq h3 {
  margin: 1rem 0 0.25rem;
  font-size: 0.95rem;
}

.tl-board__faq p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

/* Member pages: leaderboard rank under the signup form. */
.tl-rank {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.tl-rank a {
  color: var(--link);
}


/* /congress/this-week and /congress/week/:monday. */
.cw-summary {
  margin: 0.75rem 0 0;
  font-weight: 600;
  line-height: 1.45;
}

.cw-nav {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.cw-nav a,
.cw-members a {
  color: var(--text);
}

.cw-members {
  white-space: normal !important;
}

/* /trade-alerts/:id: one trade's page. */
.ta-post__entry {
  margin: 0.75rem 0 0;
  font-weight: 600;
  line-height: 1.45;
}

.ta-post__since {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.ta-post__points {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.6;
}

/* /trades/:trader/:year: search box and names under tickers. */
.oge-trades__search {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  max-width: 28rem;
}

.oge-trades__search .tl-form__email {
  flex: 1 1 auto;
  min-width: 0;
}

.oge-trades__name {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

/* /congress-trade-alerts: the action buttons, the comparison table and the two notes under it. */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* The solid primary button comes from .tl-form__submit; these are the outlined
   secondary actions beside it, the compact sibling of .tl-portfolio-button. */
.cta-actions .scout-follow {
  margin-top: 0;
}

.cta-button {
  padding: 0.7rem 1.15rem;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.cta-button:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.cta-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.cta-compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
  line-height: 1.45;
}

.cta-compare th,
.cta-compare td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.cta-compare thead th {
  border-bottom-color: var(--hairline-strong);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.cta-compare tbody th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.cta-compare th:first-child {
  width: 6.5rem;
  padding-left: 0;
}

.cta-compare .cta-compare__us {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.cta-compare thead .cta-compare__us {
  box-shadow: inset 0 2px 0 var(--accent);
  color: var(--accent);
}

.cta-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.cta-note {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.cta-note .tl-section-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.cta-note p {
  margin: 0;
}

@media (max-width: 760px) {
  .cta-compare,
  .cta-compare tbody,
  .cta-compare tr,
  .cta-compare th,
  .cta-compare td {
    display: block;
    width: auto;
  }

  .cta-compare thead {
    position: absolute;
    left: -9999px;
  }

  .cta-compare tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
  }

  .cta-compare th,
  .cta-compare td {
    padding: 0.25rem 0;
    border: 0;
  }

  .cta-compare th:first-child {
    width: auto;
  }

  .cta-compare tbody th {
    padding-bottom: 0.4rem;
  }

  .cta-compare td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
  }

  .cta-compare .cta-compare__us {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
  }
}

/* Moving-average screener (/screener/200-week-moving-average). */
.tl-ma__below {
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--loss);
  border-radius: 999px;
  color: var(--loss);
  font-size: 0.7rem;
  font-weight: 600;
}

.tl-board__updated .is-active {
  font-weight: 600;
  text-decoration: none;
}