/* ============================================================================
   Stock Houses — additions only.

   Loaded after app.css / redesign.css / declutter.css and scoped to .hs-* (plus
   two column classes this table introduces). It overrides nothing the
   leaderboard uses, so this file cannot change how index.html renders. Every
   colour comes from the existing custom properties, so both themes and the
   contrast work already done on the leaderboard carry over unchanged.
   ========================================================================= */

/* ------------------------------------------------------------------ intro - */
.hs-intro {
  margin: 14px 0 10px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.hs-lead { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; }
.hs-sub  { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.hs-warn {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------------------ table - */
.hs-tbl .c-tk { min-width: 148px; }
.hs-tbl .c-cm { min-width: 250px; }
/* Wraps rather than nowrap: Hims House's platform list is "X + Substack +
   Discord + YouTube", which on one line ran straight through the Size column
   and printed itself over the figure. */
.hs-tbl .c-pf { white-space: normal; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.hs-tbl .c-sz b,
.hs-tbl .c-mc b { display: block; font-variant-numeric: tabular-nums; }
.hs-tbl .c-sz small,
.hs-tbl .c-mc small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.hs-tbl .c-go { text-align: right; white-space: nowrap; }

.hs-row { cursor: pointer; }
.hs-row.is-open { background: var(--surface-3); }

.hs-name { font-weight: 600; }
.hs-desc {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  /* Two lines is enough to tell what a community is; the whole description is
     in the drawer. A description column that grows without limit turns the
     table into prose. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hs-out {
  font-size: 12px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}
.hs-out:hover { border-color: var(--accent); }

/* ------------------------------------------------------------- live state - */
.hs-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}
.hs-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.hs-live.is-live    { color: var(--up); }
.hs-live.is-quiet   { color: var(--muted); }
.hs-live.is-dormant { color: var(--down); }
/* Unknown is not a shade of dormant. It reads as a hollow ring, so it is
   visibly a different STATE rather than a weaker one. */
.hs-live.is-unknown { color: var(--muted); opacity: .8; }
.hs-live.is-unknown i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.hs-approx { cursor: help; opacity: .75; }

/* ----------------------------------------------------------------- badges - */
.hs-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: 1px;
  white-space: nowrap;
}
.hs-badge.is-house    { border-color: var(--accent); color: var(--accent); }
.hs-badge.is-room     { color: var(--muted); }
.hs-badge.is-warn     { border-color: var(--down); color: var(--down); }
/* The only badge that makes a claim about a company. It is the strongest thing
   on the row and it is only ever printed from the community's own words. */
.hs-badge.is-official { border-color: var(--up); color: var(--up); }


/* ----------------------------------------------------------------- drawer - */
/* `1fr` resolves its minimum to min-content, and this drawer holds nowrap coin
   rows and long unbroken community names — enough min-content for the two
   columns to lay out 2600px wide inside a 1408px cell and push the memecoin
   list clean off the right of the screen. `minmax(0, 1fr)` is the fix: it lets
   a column be narrower than its content and clip, which is what the ellipsis
   and wrapping rules below are for. */
.hs-drawer > td { padding: 0 !important; background: var(--surface-2); }
.hs-dr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
}
.hs-dr h4 {
  margin: 0 0 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.hs-dr-l, .hs-dr-r { min-width: 0; overflow-wrap: anywhere; }
.hs-dr-l h4:not(:first-child),
.hs-dr-r h4:not(:first-child) { margin-top: 12px; }
.hs-ev, .hs-claim, .hs-none, .hs-locked, .hs-more {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.5;
}
.hs-claim {
  padding: 7px 9px;
  border-left: 2px solid var(--line);
  color: var(--muted);
}
.hs-none { color: var(--muted); }
.hs-locked { color: var(--muted); }

.hs-surf { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.hs-surf li { padding: 2px 0; }
.hs-surf b { display: inline-block; min-width: 78px; }

.hs-coins { margin: 0; padding: 0; list-style: none; }
.hs-coin {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12.5px;
}
.hs-coin:last-child { border-bottom: 0; }
.hs-coin a { text-decoration: none; display: flex; gap: 7px; align-items: baseline; min-width: 0; }
.hs-coin-tk { font-weight: 600; }
.hs-coin-nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-coin-mc { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ gaps -- */
.hs-gaps {
  margin: 20px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.hs-gaps h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.hs-gaps p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.55; }
.hs-gaps p:last-child { margin-bottom: 0; }
.hs-hole { padding-top: 8px; border-top: 1px dashed var(--line); }

.hs-err { padding: 22px 16px; color: var(--down); }

/* ------------------------------------------------------------------ small - */
@media (max-width: 900px) {
  /* The table keeps a 1040px min-width and scrolls sideways inside its own
     container, so a drawer laid out at the table's width would make the reader
     scroll right to read a paragraph. Pinning it to the scroller's left edge
     keeps the prose where the eye already is; the ROW above it still scrolls
     sideways, which is what a reader expects of a wide table. */
  .hs-dr {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    position: sticky;
    left: 0;
    width: min(100vw - 34px, 1006px);
  }
}
@media (max-width: 760px) {
  /* Platform is the first thing to go: it is repeated in the community name on
     nearly every row (r/… , $… on Stocktwits), so dropping it costs a phone
     reader nothing. */
  .hs-tbl .c-pf { display: none; }
  .hs-desc { -webkit-line-clamp: 1; }
}

/* ====================================================== layout containment ==
   THE LEADERBOARD'S TABLE RULES DO NOT FIT THIS TABLE, IN BOTH DIRECTIONS.

   Wide: app.css sets `.tbl-scroll { overflow: visible }` above 1400px and
   relies on `.tbl { min-width: 1320px }` fitting inside the viewport. This
   table has a free-text Community column, so its natural width ran to 2386px
   and pushed 962px of horizontal scroll onto the DOCUMENT — measured at
   1440px, against a live leaderboard that overflows 0. `table-layout: fixed`
   plus explicit column widths makes the width a decision instead of an
   accident, and the description clamps inside its cell.

   Narrow: redesign.css reflows the leaderboard into cards by targeting
   `tbody tr.r`. These rows are `tr.hs-row`, so they would have kept
   table-row display inside a `display: block` tbody — a broken hybrid. Rather
   than bolt a second card layout onto a table with a drawer in it, this table
   stays a table at every width and scrolls sideways inside its own container.
   The document itself never scrolls sideways.
   ========================================================================= */
/* STICKY HEADER + A SCROLL CONTAINER: the trap. `overflow-x: auto` makes this
   element a scroll container in BOTH axes as far as `position: sticky` is
   concerned, so the header's `top: var(--head-top, 60px)` started resolving
   against the container rather than the viewport and parked the header 60px
   INSIDE the table — sitting directly on top of row 1 and hiding it. app.css
   already solves this below 1400px by scrolling the region itself and
   re-anchoring the header to 0; this table needs a scroll container at every
   width, so it takes that same treatment at every width. */
.tbl-scroll.hs-scroll {
  overflow: auto;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  border-bottom: 1px solid var(--line);
  overscroll-behavior-x: contain;
}
.hs-scroll .hs-tbl thead th { --head-top: 0px; }
.hs-tbl {
  display: table;
  table-layout: fixed;
  width: 100%;
  min-width: 1040px;
}
.hs-tbl thead { display: table-header-group; }
.hs-tbl tbody { display: table-row-group; }
.hs-tbl tr    { display: table-row; }
.hs-tbl th, .hs-tbl td { display: table-cell; }

.hs-tbl .c-rank { width: 46px; }
.hs-tbl .c-tk   { width: 172px; min-width: 0; }
.hs-tbl .c-cm   { width: auto;  min-width: 0; }
.hs-tbl .c-pf   { width: 124px; }
.hs-tbl .c-sz   { width: 132px; }
.hs-tbl .c-lv   { width: 108px; }
.hs-tbl .c-mc   { width: 196px; }
.hs-tbl .c-go   { width: 92px; }

/* A fixed layout will not shrink long unbroken strings on its own. */
.hs-tbl td { overflow-wrap: anywhere; }
.hs-name { overflow-wrap: anywhere; }

/* app.css sets `.tbl tbody td { white-space: nowrap }`, which is right for a
   grid of figures and catastrophic for a drawer full of prose: every paragraph
   in the drawer rendered as one unbroken line straight across the memecoin
   list next to it. Wrapping is restored for the drawer and for the two-line
   description, and re-asserted as nowrap only on the cells that are numbers. */
.hs-drawer > td,
.hs-dr, .hs-dr p, .hs-dr li, .hs-dr h4, .hs-desc { white-space: normal; }
.hs-coin-nm, .hs-coin-mc { white-space: nowrap; }