/* Canonical CSS owner: ladder. Historical layers consolidated 2026-08-02. */
.ladder-mini {
  display: grid;

  gap: 8px;
}

.ladder-stock {
  display: grid;

  grid-template-columns: minmax(0px, 1fr) auto;

  gap: 8px;

  padding: 9px 4px;

  border-bottom: 1px solid var(--border);

  cursor: pointer;
}

.ladder-stock:hover {
  color: var(--blue-dark);
}

.ladder-stock small {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: var(--text-muted);

  text-overflow: ellipsis;

  white-space: nowrap;
}

.ladder-stock time {
  color: var(--text-muted);

  font-variant-numeric: tabular-nums;
}

.ladder-more:hover {
  background: var(--action-soft);
}

.ladder-more .lucide {
  width: 15px;

  height: 15px;
}

@media (max-width: 1023px) {

  .ladder-more {
    grid-column: 1 / -1;

    min-height: 38px;

    border-top: 1px solid var(--border);

    border-left: 0px;
  }
}

@media (max-width: 767px) {

  .ladder-more {
    grid-column: auto;
  }
}

.ladder-level {
  border-color: var(--border);

  border-radius: 6px;

  box-shadow: rgba(22, 34, 46, 0.04) 0px 1px 3px;
}

@media (max-width: 767px) {
  .ladder-board {
    align-items: stretch;

    padding: 12px 8px 14px;
  }
}

.ladder-board {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  align-items: flex-end;

  max-width: 1120px;

  margin: 0px auto;

  display: flex;

  flex-direction: column;

  gap: 0px;

  padding: 0px;

  border: 1px solid var(--border);

  border-radius: var(--card-radius);

  background: var(--surface-raised);

  box-shadow: var(--card-shadow);

  overflow: hidden;
}

.ladder-more {
  min-width: 84px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  background: var(--surface-muted);

  cursor: pointer;

  align-self: center;

  margin-right: 12px;

  padding: 7px 8px;

  border: 1px dashed var(--border-strong);

  border-radius: 8px;

  color: var(--text-secondary);

  font-size: var(--font-size-caption);

  white-space: nowrap;
}

.ladder-gap {
  min-height: 68px;

  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 9px, var(--surface-subtle) 9px, var(--surface-subtle) 18px);
}

.ladder-gap-note {
  color: var(--text-tertiary);

  font-size: 11.5px;
}

.ladder-insight-card {
  border: 1px solid var(--border);

  border-radius: var(--card-radius);

  background: var(--surface-raised);

  box-shadow: var(--card-shadow);

  overflow: hidden;
}

.ladder-insight-card > header h3 {
  margin: 0px;

  font-size: 13.5px;
}

.ladder-insight-card > header span {
  margin-left: auto;

  padding: 2px 6px;

  border-radius: 4px;

  background: var(--xb-gray-100);

  color: var(--text-secondary);

  font-size: 10px;
}

.ladder-insight-card > p {
  margin: 0px;

  padding: 0px 13px 12px;

  color: var(--text-secondary);

  font-size: 10.5px;

  line-height: 1.65;
}

.ladder-apex {
  display: flex;

  flex-direction: column;

  gap: 5px;

  padding: 14px 13px 9px;
}

.ladder-apex strong {
  color: var(--danger);

  font-size: 25px;
}

.ladder-apex span {
  color: var(--text-primary);

  font-size: 12px;

  font-weight: 650;

  line-height: 1.55;
}

.ladder-rate-list i {
  height: 8px;

  overflow: hidden;

  border-radius: 4px;

  background: var(--xb-gray-100);
}

.ladder-rate-list {
  display: grid;

  gap: 9px;

  padding: 12px 13px;
}

.ladder-rate-list > div {
  display: grid;

  grid-template-columns: 72px minmax(0px, 1fr) 42px;

  align-items: center;

  gap: 7px;

  color: var(--text-secondary);

  font-size: 10px;
}

.ladder-rate-list i b {
  height: 100%;

  display: block;

  border-radius: inherit;

  background: var(--primary);
}

.ladder-rate-list strong {
  color: var(--text-primary);

  text-align: right;
}

@media (max-width: 1280px) {
  .ladder-workspace {
    grid-template-columns: minmax(0px, 1fr) 260px;
  }
}

@media (max-width: 900px) {
  .ladder-insights {
    grid-template-columns: 1fr;
  }

  .ladder-more {
    grid-column: 2;

    margin: 0px 9px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ladder-stock {
    animation: auto ease 0s 1 normal none running none !important;

    transition: none !important;
  }
}

.ladder-workspace {
  display: grid;

  gap: 12px;

  align-items: start;

  grid-template-columns: minmax(0px, 1fr) 320px;
}

.ladder-insights {
  display: grid;

  gap: 12px;
}

.ladder-insight-card > header {
  display: flex;

  align-items: center;

  padding: 0px 13px;

  border-bottom: 1px solid var(--border);

  min-height: 42px;
}

@media (max-width: 900px) {
  .ladder-workspace {
    grid-template-columns: 1fr;
  }
}

.redesigned-ladder-view {
  overflow: visible;

  padding: 0px;

  border: 0px;

  border-radius: 0px;

  background: transparent;

  box-shadow: none;
}

.ladder-page-head .section-title-group h2 {
  font-size: var(--font-size-page-title);

  font-weight: var(--font-weight-semibold);
}

.ladder-page-head {
  margin-bottom: 12px;
}

.ladder-page-head .section-subtitle b {
  font-weight: 400;
}

.ladder-head-actions {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-left: auto;
}

.ladder-sort-segment {
  display: inline-flex;

  gap: 2px;

  padding: 2px;

  border-radius: 8px;

  background: var(--surface-muted);
}

.ladder-sort-segment button {
  min-height: 28px;

  padding: 4px 12px;

  border-radius: 6px;

  color: var(--r2-sub);

  font-size: var(--font-size-label);
}

.ladder-sort-segment button.active {
  background: var(--surface);

  color: var(--r2-ink);

  font-weight: 600;

  box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px;
}

.market-ladder-workspace {
  display: grid;

  grid-template-columns: minmax(0px, 1fr) 320px;

  gap: 12px;

  align-items: start;
}

.market-ladder-board {
  min-width: 0px;

  overflow: hidden;

  border: 1px solid var(--r2-line);

  border-radius: var(--r2-radius);

  background: var(--surface);

  box-shadow: var(--r2-shadow);
}

.market-ladder-tier {
  display: flex;

  min-width: 0px;

  border-bottom: 1px solid var(--r2-line-soft);
}

.market-ladder-tier:last-child {
  border-bottom: 0px;
}

.market-ladder-label {
  width: 118px;

  flex: 0 0 118px;

  padding: 14px 0px 14px 16px;

  border-right: 1px solid var(--r2-line-soft);

  background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 8%, var(--surface)), var(--surface));
}

.market-ladder-tier.is-gap .market-ladder-label {
  background: repeating-linear-gradient(45deg, var(--surface-subtle), var(--surface-subtle) 8px, var(--surface-muted) 8px, var(--surface-muted) 16px);
}

.market-ladder-level {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--tier-color);

  font-size: 15px;

  font-weight: 800;
}

.market-ladder-dot {
  width: 9px;

  height: 9px;

  display: inline-block;

  border-radius: 3px;

  background: var(--tier-color);
}

.market-ladder-count {
  margin-top: 3px;

  color: var(--r2-faint);

  font-size: 11px;
}

.market-ladder-rate {
  margin-top: 6px;

  color: var(--r2-sub);

  font-size: 10.5px;
}

.market-ladder-rate b {
  color: var(--r2-ink);

  font-weight: 700;
}

.market-ladder-stocks {
  min-width: 0px;

  flex: 1 1 0%;

  display: grid;

  grid-template-columns: repeat(auto-fill, 190px);

  place-content: flex-start start;

  gap: 8px;

  padding: 12px 14px;
}

.market-ladder-stock {
  min-width: 0px;

  width: 190px;

  display: block;

  padding: 7px 11px;

  border: 1px solid var(--r2-line);

  border-radius: 8px;

  background: var(--surface);

  color: var(--r2-ink);

  text-align: left;

  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}

.market-ladder-stock:focus-visible,
.market-ladder-stock:hover {
  border-color: var(--r2-blue-line);

  box-shadow: rgba(16, 24, 40, 0.1) 0px 3px 10px;

  outline: 0px;

  transform: translateY(-1px);
}

.market-ladder-stock-first {
  min-width: 0px;

  display: flex;

  align-items: center;

  gap: 6px;
}

.market-ladder-stock-first strong {
  min-width: 0px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: var(--font-size-table);

  font-weight: var(--font-weight-semibold);
}

.market-ladder-stock-first .stock-code {
  flex: 0 0 auto;

  color: var(--r2-faint);

  font-size: 10.5px;
}

.market-ladder-tags {
  min-width: 0px;

  display: flex;

  gap: 3px;

  margin-left: auto;
}

.market-ladder-tag {
  display: inline-block;

  padding: 1px 5px;

  border-radius: 4px;

  font-size: 10px;

  font-style: normal;

  line-height: 1.5;

  white-space: nowrap;
}

.market-ladder-tag.one-price {
  background: var(--r2-up-soft);

  color: var(--r2-up);

  font-weight: 700;
}

.market-ladder-tag.broken {
  background: var(--r2-amber-soft);

  color: var(--r2-amber);
}

.market-ladder-stock-second {
  min-width: 0px;

  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 4px;

  color: var(--r2-sub);

  font-size: 11px;
}

.market-ladder-stock-second b {
  max-width: 92px;

  overflow: hidden;

  padding: 0px 5px;

  border-radius: 4px;

  background: var(--r2-blue-soft);

  color: var(--r2-blue);

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 11px;

  font-weight: 500;
}

.market-ladder-stock-second small {
  color: var(--r2-sub);

  font-size: 10.5px;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}

.market-ladder-stock-second small:last-child {
  margin-left: auto;

  color: var(--r2-faint);
}

.market-ladder-gap-note {
  align-self: center;

  padding: 8px 14px;

  border: 1.5px dashed var(--r2-line);

  border-radius: 8px;

  color: var(--r2-faint);

  font-size: 12px;
}

.market-ladder-more {
  place-self: center start;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 8px 16px;

  border: 1px dashed var(--r2-line);

  border-radius: 8px;

  color: var(--r2-sub);

  font-size: 12px;

  white-space: nowrap;
}

.market-ladder-more:focus-visible,
.market-ladder-more:hover {
  border-color: var(--r2-blue-line);

  color: var(--r2-blue);

  outline: 0px;
}

.market-ladder-insights {
  min-width: 0px;

  display: flex;

  flex-direction: column;

  gap: 12px;
}

.market-ladder-insight-card {
  min-width: 0px;

  overflow: hidden;

  border: 1px solid var(--r2-line);

  border-radius: var(--r2-radius);

  background: var(--surface);

  box-shadow: var(--r2-shadow);
}

.market-ladder-insight-card > header {
  min-height: 42px;

  display: flex;

  align-items: center;

  padding: 0px 14px;

  border-bottom: 1px solid var(--r2-line-soft);
}

.market-ladder-insight-card > header h3 {
  margin: 0px;

  font-size: var(--font-size-card-title);

  font-weight: var(--font-weight-semibold);
}

.market-ladder-insight-card > header span {
  margin-left: auto;

  padding: 2px 7px;

  border-radius: 5px;

  background: var(--surface-muted);

  color: var(--r2-sub);

  font-size: 11px;
}

.market-ladder-apex {
  padding: 14px 16px 8px;
}

.market-ladder-apex > div {
  display: flex;

  align-items: baseline;

  gap: 10px;
}

.market-ladder-apex strong {
  color: var(--r2-up);

  font-size: var(--font-size-metric);

  font-weight: var(--font-weight-semibold);
}

.market-ladder-apex em {
  padding: 2px 7px;

  border-radius: 5px;

  background: var(--r2-amber-soft);

  color: var(--r2-amber);

  font-size: 11.5px;

  font-style: normal;
}

.market-ladder-apex p {
  margin: 8px 0px 0px;

  color: var(--r2-ink);

  font-size: 12.5px;

  line-height: 1.9;
}

.market-ladder-apex p b {
  font-weight: 700;
}

.market-ladder-insight-card > p {
  margin: 0px;

  padding: 0px 14px 12px;

  color: var(--r2-sub);

  font-size: 11.5px;

  line-height: 1.7;
}

.market-ladder-pyramid {
  padding: 8px 16px 10px;
}

.market-ladder-pyramid-row {
  display: flex;

  align-items: center;

  gap: 8px;

  padding: 4px 0px;
}

.market-ladder-pyramid-row > span {
  width: 52px;

  color: var(--r2-sub);

  font-size: 12px;

  text-align: right;
}

.market-ladder-pyramid-row > i {
  flex: 1 1 0%;

  height: 14px;

  overflow: hidden;

  border-radius: 4px;

  background: var(--surface-muted);
}

.market-ladder-pyramid-row > i b {
  display: block;

  height: 100%;

  border-radius: 4px;

  background: var(--r2-blue);
}

.market-ladder-pyramid-row:nth-child(2) > i b {
  background: var(--r2-up);
}

.market-ladder-pyramid-row:nth-child(3) > i b {
  background: var(--r2-amber);
}

.market-ladder-pyramid-row:nth-child(4) > i b {
  background: var(--r2-down);
}

.market-ladder-pyramid-row.is-gap > i {
  background: repeating-linear-gradient(45deg, var(--border), var(--border) 4px, var(--surface-muted) 4px, var(--surface-muted) 8px);
}

.market-ladder-pyramid-row.is-gap > i b {
  background: transparent;
}

.market-ladder-pyramid-row > strong {
  width: 44px;

  color: var(--r2-ink);

  font-size: 12px;

  font-variant-numeric: tabular-nums;
}

.market-ladder-pyramid-row.is-gap > strong {
  color: var(--r2-faint);

  font-weight: 400;
}

.market-ladder-rate-list {
  padding: 6px 16px 8px;
}

.market-ladder-rate-list > div {
  display: flex;

  align-items: center;

  gap: 8px;

  padding: 5px 0px;

  font-size: 12px;
}

.market-ladder-rate-list > div > span {
  width: 112px;

  color: var(--r2-sub);
}

.market-ladder-rate-list > div > i {
  flex: 1 1 0%;

  height: 8px;

  overflow: hidden;

  border-radius: 4px;

  background: var(--surface-muted);
}

.market-ladder-rate-list > div > i b {
  display: block;

  height: 100%;

  border-radius: 4px;

  background: var(--r2-up);
}

.market-ladder-rate-list > div > i b.is-low {
  background: var(--r2-amber);
}

.market-ladder-rate-list > div > i b.is-zero {
  background: var(--border-strong);
}

.market-ladder-rate-list > div > strong {
  width: 44px;

  color: var(--r2-up);

  text-align: right;

  font-variant-numeric: tabular-nums;
}

.market-ladder-rate-list > div > strong.is-low {
  color: var(--r2-amber);
}

.market-ladder-rate-list > div > strong.is-zero {
  color: var(--r2-faint);
}

.market-ladder-source {
  display: block;

  padding: 0px 16px 12px;

  color: var(--r2-faint);

  font-size: 10.5px;
}

@media (max-width: 1020px) {
  .market-ladder-workspace {
    grid-template-columns: minmax(0px, 1fr);
  }

  .market-ladder-insights {
    display: grid;

    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
}

@media (max-width: 767px) {
  .redesigned-ladder-view {
    padding: 0px;
  }

  .ladder-page-head {
    flex-wrap: wrap;
  }

  .ladder-page-head .section-title-group {
    width: 100%;
  }

  .ladder-head-actions {
    width: 100%;

    margin-left: 0px;

    justify-content: space-between;
  }

  .market-ladder-insights {
    grid-template-columns: minmax(0px, 1fr);
  }

  .market-ladder-tier {
    display: block;
  }

  .market-ladder-label {
    width: 100%;

    padding: 10px 12px;

    border-right: 0px;

    border-bottom: 1px solid var(--r2-line-soft);
  }

  .market-ladder-level {
    font-size: 14px;
  }

  .market-ladder-rate {
    display: inline-block;

    margin: 0px 0px 0px 8px;
  }

  .market-ladder-stocks {
    padding: 9px;

    grid-template-columns: minmax(0px, 1fr);
  }

  .market-ladder-stock {
    width: 100%;

    min-width: 0px;
  }

  .market-ladder-more {
    margin: 0px 0px 0px 8px;
  }
}

.lad-grid {
  display: grid;

  grid-template-columns: minmax(0px, 1fr) 320px;

  gap: 12px;

  align-items: start;
}

@media (max-width: 1400px) {
  .lad-grid {
    grid-template-columns: minmax(0px, 1fr) 300px;
  }
}

@media (min-width: 768px) {
  :root #ladderView.active-view {
    height: auto;

    min-height: 0px;

    display: block;

    overflow: visible;
  }
}

:root[data-theme="dark"] .market-ladder-tier:nth-child(1) {
  background: var(--ladder-level-1);
}

:root[data-theme="dark"] .market-ladder-tier:nth-child(2) {
  background: var(--ladder-level-2);
}

:root[data-theme="dark"] .market-ladder-tier:nth-child(3) {
  background: var(--ladder-level-3);
}

:root[data-theme="dark"] .market-ladder-tier:nth-child(4) {
  background: var(--ladder-level-4);
}

:root[data-theme="dark"] .market-ladder-tier:nth-child(5) {
  background: var(--ladder-level-5);
}

:root[data-theme="dark"] :is(.market-ladder-stock, .rotation-day, .rotation-table-frame, .auction-table-frame-v2) {
  border-color: var(--border);

  background: var(--surface-subtle);
}

:root[data-theme="dark"] #ladderView :is(.ladder-sort-segment, .market-ladder-board) {
  border-color: var(--border);

  background: var(--surface);

  color: var(--text-primary);
}

:root[data-theme="dark"] #ladderView .ladder-sort-segment {
  background: var(--surface-muted);
}

:root[data-theme="dark"] #ladderView .ladder-sort-segment button.active {
  background: var(--surface-subtle);

  color: var(--text-primary);

  box-shadow: var(--control-shadow);
}

:root[data-theme="dark"] #ladderView .market-ladder-label {
  border-color: var(--line-soft);

  background: color-mix(in srgb, var(--tier-color) 12%, var(--surface-subtle));
}

:root[data-theme="dark"] #ladderView .market-ladder-tier.is-gap .market-ladder-label {
  background: var(--surface-muted);
}

:root[data-theme="dark"] #ladderView :is(.market-ladder-insight-card > header span, .market-ladder-pyramid-row > i, .market-ladder-rate-list > div > i) {
  background: var(--surface-muted);

  color: var(--text-secondary);
}

/* Mobile ladder becomes a readable vertical hierarchy instead of a narrow rail. */
@media (max-width: 767px) {
  #ladderView {
    padding-inline: 0;
  }

  #ladderView .ladder-page-head {
    gap: var(--space-8);
  }

  #ladderView .ladder-head-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
  }

  #ladderView .ladder-sort-segment {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #ladderView .market-ladder-workspace,
  #ladderView .lad-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  #ladderView .market-ladder-board {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #ladderView .market-ladder-tier {
    width: 100%;
    min-height: 0;
    display: block;
  }

  #ladderView .market-ladder-label {
    width: 100%;
    min-height: var(--mobile-touch-size);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    writing-mode: horizontal-tb;
  }

  #ladderView .market-ladder-level {
    display: inline-flex;
    margin: 0;
    writing-mode: horizontal-tb;
  }

  #ladderView .market-ladder-rate {
    display: inline-flex;
    writing-mode: horizontal-tb;
    margin-left: auto;
  }

  #ladderView .market-ladder-stocks {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-8);
  }

  #ladderView .market-ladder-stock {
    width: 100%;
    min-width: 0;
  }

  #ladderView .market-ladder-gap-note,
  #ladderView .market-ladder-more {
    width: 100%;
    min-height: var(--mobile-touch-size);
    margin: 0;
    justify-content: center;
  }

  #ladderView .market-ladder-insights {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
}