/* ============================================================================
   Stockyard — additions only.

   Loaded after app.css / redesign.css / declutter.css and scoped to .sy-* plus
   the column classes this table introduces. It overrides nothing the
   leaderboard or Stock Houses uses, so this file cannot change how any other
   page renders. Every colour comes from the existing custom properties, so
   both themes and the contrast work already done carry over unchanged.

   ONE DEPARTURE FROM STOCK HOUSES, DELIBERATE. Houses keeps its table a table
   at every width and scrolls sideways, because it has a free-text description
   column that no phone layout survives. This table has no prose in it — eight
   short, chunky columns — so it reflows into cards on a phone instead. That is
   the redesign brief: mobile-first, big type, logos, uncrowded. A board about
   who is winning should be readable with a thumb.
   ========================================================================= */

/* ------------------------------------------------------------------ intro - */
.sy-intro {
  margin: 14px 0 10px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.sy-lead { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.sy-sub {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--muted);
}
.sy-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sy-key b { color: var(--text); font-weight: 600; }
.sy-warn {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.sy-alert { color: var(--down); }

/* --------------------------------------------------------------- the dot -- */
/* One shape, four meanings, used in the key and in every row so the legend
   above the table is literally the same mark the rows use. */
.sy-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  display: inline-block;
}
.sy-dot.is-held      { color: var(--up); }
.sy-dot.is-contested { color: var(--accent-2); }
.sy-dot.is-open      { color: var(--eq-2); }
.sy-dot.is-none      { color: var(--faint); }
/* Unknown is not a shade of anything. It reads as a hollow ring so it is
   visibly a different STATE rather than a weaker one — same treatment Stock
   Houses gives its unknown liveness. */
.sy-dot.is-unknown {
  color: var(--muted);
  background: transparent;
  box-shadow: inset 0 0 0 1.6px currentColor;
}

/* ------------------------------------------------------------- state cell - */
.sy-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.sy-state.is-held      { color: var(--up); }
.sy-state.is-contested { color: var(--accent); }
.sy-state.is-open      { color: var(--eq); }
.sy-state.is-none,
.sy-state.is-unknown   { color: var(--muted); font-weight: 500; }

/* The share bar. Bare words hide the difference between "held at 97%" and
   "held at 51%", which on this board is the difference between a stock that is
   over and one that is still worth entering. */
.sy-bar {
  display: block;
  margin-top: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.sy-bar i { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.sy-state.is-held ~ .sy-bar      { color: var(--up); }
.sy-share {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
/* The bar inherits its colour from the row's state via the cell, not via a
   sibling selector — a sibling combinator only reaches forward and the cell
   holds all three elements. */
.c-st { color: var(--muted); }
.sy-row .c-st:has(.is-held)      { color: var(--up); }
.sy-row .c-st:has(.is-contested) { color: var(--accent-2); }
.sy-row .c-st:has(.is-open)      { color: var(--eq-2); }

/* ----------------------------------------------------------------- podium - */
.sy-pod {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.sy-pod-i { min-width: 0; }
.sy-pod-i > a,
.sy-pod-i > span {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.sy-pod-i > a:hover .sy-pod-tx b { color: var(--accent); }
.sy-pod-mk { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.sy-pod-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sy-pod-tx b {
  font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 96px;
}
.sy-pod-tx small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* First place is the only one given weight. Three equally-loud entries is not
   a podium, it is a list. */
.sy-pod-i.p1 .sy-pod-mk { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--accent-2); }
.sy-pod-i.p1 .sy-pod-tx b { font-size: 13.5px; }
.sy-pod-i.p3 { opacity: .8; }
.sy-pod-i.is-ext .sy-pod-tx b::after {
  content: '↗';
  margin-left: 3px;
  font-size: 9px;
  color: var(--faint);
  vertical-align: 2px;
}

/* ------------------------------------------------------------- other cells */
.sy-tbl .c-px b,
.sy-tbl .c-n b,
.sy-tbl .c-liq b { display: block; font-variant-numeric: tabular-nums; }
.sy-tbl .c-px small,
.sy-tbl .c-n small,
.sy-tbl .c-liq small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}


/* ----------------------------------------------------------------- badges - */
.sy-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: 1px;
  white-space: nowrap;
  color: var(--muted);
}
.sy-badge.is-ext  { border-color: var(--accent); color: var(--accent); }
.sy-badge.is-dust { border-color: var(--line-2); color: var(--faint); }

/* ------------------------------------------------------------------ rows -- */
.sy-row { cursor: pointer; }
.sy-row.is-open { background: var(--surface-3); }

/* ---------------------------------------------------------------- drawer -- */
.sy-drawer > td { padding: 0; background: var(--surface-2); }
.sy-dr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  padding: 16px 18px 18px;
  border-bottom: 1px solid var(--line);
}
.sy-dr h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.sy-dr-r h4 { margin-top: 0; }
.sy-ev { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.sy-ev i { color: var(--muted); font-style: normal; font-size: 12px; }
.sy-ev.is-warn { color: var(--down); }
.sy-dim { color: var(--muted); font-size: 12.5px; }
.sy-none { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.sy-more { margin: 8px 0 0; font-size: 12.5px; }

.sy-coins {
  list-style: none;
  margin: 0; padding: 0;
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
}
/* FLEX, NOT GRID. A coin row carries a variable number of badges — none, or
   "via stockyard", or "dormant", or both. In a fixed grid
   each badge is another column, so the row silently wrapped and "VIA STOCKYARD"
   landed on a line of its own under every external coin, making alternate rows
   twice the height. Flex lets the badges sit inline and the two figures hold
   their own width. */
.sy-coin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sy-coin:last-child { border-bottom: 0; }
.sy-coin > a, .sy-c-plain {
  display: flex; align-items: center; gap: 7px;
  min-width: 0; flex: 1 1 auto; text-decoration: none; color: inherit;
}
/* The badges sit right after the name and before the figures, and never grow. */
.sy-coin .sy-badge { flex: 0 0 auto; margin-left: 0; order: 1; }
.sy-c-liq { order: 2; }
.sy-c-lp  { order: 3; }
.sy-coin > a:hover .sy-c-tk { color: var(--accent); }
.sy-c-rk {
  font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
  flex: 0 0 26px; text-align: right;
}
.sy-c-mk { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.sy-c-tk { font-weight: 700; }
.sy-c-nm { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.sy-c-liq { font-variant-numeric: tabular-nums; text-align: right; flex: 0 0 auto; }
.sy-c-lp { font-size: 11px; color: var(--faint); text-align: right; flex: 0 0 62px; }
/* A dormant pool is dimmed, not hidden. The reader can see it exists and see
   why it is not on the podium. */
.sy-coin.is-dust { opacity: .55; }

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

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

/* ====================================================== layout containment ==
   Same trap Stock Houses documents, same fix. `overflow-x: auto` makes this
   element a scroll container in BOTH axes as far as `position: sticky` is
   concerned, so a header anchored to `--head-top: 60px` parks itself 60px
   INSIDE the table and sits on top of row 1. The scroll container is this
   region, so the header re-anchors to 0 within it.
   ========================================================================= */
.tbl-scroll.sy-scroll {
  overflow: auto;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  border-bottom: 1px solid var(--line);
  overscroll-behavior-x: contain;
}
.sy-scroll .sy-tbl thead th { --head-top: 0px; }
.sy-tbl {
  display: table;
  table-layout: fixed;
  width: 100%;
  min-width: 1120px;
}
.sy-tbl thead { display: table-header-group; }
.sy-tbl tbody { display: table-row-group; }
.sy-tbl tr    { display: table-row; }
.sy-tbl th, .sy-tbl td { display: table-cell; }

.sy-tbl .c-rank { width: 46px; }
.sy-tbl .c-tk   { width: 210px; min-width: 0; }
.sy-tbl .c-px   { width: 104px; }
.sy-tbl .c-st   { width: 168px; }
.sy-tbl .c-pod  { width: auto;  min-width: 0; }
.sy-tbl .c-n    { width: 116px; }
/* "Pool liquidity" plus a sort caret plus an info button is 150px of heading
   over a 128px column: the label ran straight into the next heading. These two
   are sized to their HEADINGS, which are wider than anything under them. */
.sy-tbl .c-liq  { width: 156px; }

/* The two right-hand headings are the widest labels on the table and they had
   nowhere to go. Letting them wrap to two lines costs a few pixels of header
   height once and stops the collision at every width. */
.sy-tbl thead th.c-liq .srt,
.sy-tbl thead th.c-n .srt,

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

/* app.css sets `.tbl tbody td { white-space: nowrap }`, which is right for a
   grid of figures and wrong for a drawer full of prose. Wrapping is restored
   inside the drawer and re-asserted as nowrap on the cells that are numbers. */
.sy-drawer > td,
.sy-dr, .sy-dr p, .sy-dr li, .sy-dr h4 { white-space: normal; }
.sy-c-liq, .sy-c-lp, .sy-c-tk { white-space: nowrap; }

/* ================================================================== phone ==
   The table becomes a list of cards. `display: block` on the table elements
   takes the table layout algorithm out of the picture entirely, which is what
   lets each row become its own grid — the same technique redesign.css uses for
   the leaderboard, written against THIS table's selectors so neither can
   affect the other.

   What survives to a phone, and why: the mark and the ticker (what you are
   looking at), the state and its bar (the answer), the podium (who), and the
   liquidity (how much). Price, the coin count and the rank number go — the
   first two are in the drawer one tap away, and a rank you cannot sort is
   decoration.
   ========================================================================= */
@media (max-width: 860px) {
  .tbl-scroll.sy-scroll {
    overflow: visible;
    max-height: none;
    border-bottom: 0;
  }
  .sy-tbl { display: block; min-width: 0; width: 100%; table-layout: auto; }
  .sy-tbl thead { display: none; }
  .sy-tbl tbody { display: block; }

  .sy-tbl tbody tr.sy-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* The right-hand cell of row 1 used to be the removed "Us" column. Pool
       liquidity moves up into it rather than leaving a named area with nothing
       in it, and the state cell takes the full width beneath. */
    grid-template-areas:
      "name  liq"
      "state state"
      "pod   pod";
    align-items: center;
    column-gap: 10px;
    row-gap: 9px;
    padding: 14px 0 15px;
    border-bottom: 1px solid var(--line);
  }
  /* Every per-cell rule below is written against this same base selector.
     `.sy-tbl tbody tr.sy-row > td` is specificity (0,3,3); a shorter
     `.sy-tbl .c-px { display: none }` silently loses to it and the cell stays
     in the grid, auto-placing itself and wrecking the layout. */
  .sy-tbl tbody tr.sy-row > td {
    display: block; height: auto; padding: 0; border: 0; background: none;
    white-space: nowrap; overflow: hidden; min-width: 0; width: auto;
  }
  .sy-tbl tbody tr:hover td { background: none; }

  .sy-tbl tbody tr.sy-row > td.c-rank,
  .sy-tbl tbody tr.sy-row > td.c-px,
  .sy-tbl tbody tr.sy-row > td.c-n { display: none; }

  .sy-tbl tbody tr.sy-row > td.c-tk   { grid-area: name; }
  .sy-tbl tbody tr.sy-row > td.c-st   { grid-area: state; }
  .sy-tbl tbody tr.sy-row > td.c-pod  { grid-area: pod; overflow: visible; }
  .sy-tbl tbody tr.sy-row > td.c-liq  { grid-area: liq; text-align: right; }

  /* Bigger marks and bigger type. This is the redesign brief, and a 30px logo
     that reads fine at arm's length on a monitor is small in a hand. */
  .sy-tbl .nm { gap: 10px; }
  .sy-tbl .nm .logo, .sy-tbl .nm .logo-ph { width: 40px; height: 40px; }
  .sy-tbl .nm-tk { font-size: 17px; font-weight: 700; }
  .sy-tbl .nm-name {
    display: block; font-size: 12.5px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sy-tbl .c-liq b { font-size: 15px; }
  .sy-state { font-size: 13.5px; }

  /* The podium gets the full width of the card and spaces itself across it,
     which is the difference between three logos and a row of three coins. */
  .sy-pod {
    gap: 0;
    padding-top: 2px;
    border-top: 1px dashed var(--line);
    margin-top: 1px;
  }
  .sy-pod-i { flex: 1 1 0; padding-top: 8px; }
  .sy-pod-tx b { max-width: none; font-size: 13px; }
  .sy-pod-i.p1 .sy-pod-tx b { font-size: 14px; }

  /* The drawer stops being two columns. */
  .sy-dr { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 2px 16px; }
  .sy-coins { max-height: 340px; }
  .sy-coin { gap: 6px; }
  .sy-c-rk { flex-basis: 20px; }
  /* The launchpad is the first thing to go — it is in the badge row already
     for anything that came from outside our index. */
  .sy-c-lp { display: none; }
}

@media (max-width: 460px) {
  /* Three coins across a 360px screen gives each of them 110px, which cuts
     every ticker. Two is honest; the third is in the drawer, one tap away. */
  .sy-pod-i.p3 { display: none; }
  .sy-c-nm { display: none; }
}