/*
 * indexes.css - the Indexes surface only.
 *
 * Every selector here is a .ix- class this surface invents. The shared
 * components it sits on (.card, .detail-row, .tag, .stat-grid, details
 * .disclosure) are base.css's and are not touched from here, so a change to a
 * shared component keeps behaving the same way on all three surfaces.
 *
 * Colour comes from tokens.css. The one exception is the basket colours, which
 * arrive as inline styles from config.js because the bar and the legend need
 * them as data, not as CSS. Nothing below defines a colour that only exists
 * inside a media query, so both themes survive.
 */

/* ------------------------------------------------------------- heading -- */

/* The honesty line under the lead is centred with the title above it, and held
 * narrower than the prose so it reads as an aside rather than a third
 * paragraph of the pitch. */
.ix-lead-note {
  max-width: 52ch;
  text-align: center;
}

/* ------------------------------------------------------- market picker -- */

.ix-markets {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--step) * 3);
}

@media (min-width: 720px) {
  /* Equal columns, not auto-fit: the empty slot is only meaningful next to the
   * market it is empty beside. */
  .ix-markets { grid-template-columns: 1fr 1fr; }
}

.ix-market {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--step) * 1.5);
  width: 100%;
  min-width: 0;
  padding: calc(var(--step) * 4);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--bg-white);
  text-align: left;
}

/* The selected market. Lime is the border and the tint; the label stays ink,
 * because lime type on --accent-soft is 1.12:1 in the light theme. */
.ix-market.is-current {
  border-color: var(--accent-mid);
  background: var(--accent-soft);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.ix-market.is-current:hover { border-color: var(--accent); }
.ix-market.is-current:active { transform: translateY(1px); }

/*
 * The empty slot. Dashed and unfilled, with no cursor change, no hover state
 * and no button element behind it: it has to be obvious at a glance that there
 * is nothing here to press, rather than looking like a control that ignores
 * you.
 */
.ix-market.is-soon {
  border-style: dashed;
  background: transparent;
  cursor: default;
}

.ix-market-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  width: 100%;
}

.ix-market-sym {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* No ticker exists for the second slot, so the space where one would go is
 * drawn as an empty plate rather than filled with an invented symbol. */
.ix-market-sym.is-empty {
  display: inline-block;
  width: 5ch;
  height: 1.15em;
  border: 1px dashed var(--divider-strong);
  border-radius: var(--radius-sm);
}

.ix-market-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.ix-market.is-soon .ix-market-name { color: var(--text-muted); }

.ix-market-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The status pill sits on the cap-height of the ticker beside it. */
.ix-badge { align-self: center; }

/* ------------------------------------------------------- card internals -- */

/*
 * Composition and launch sit side by side once there is room for both to stay
 * readable. Below that they stack, and .surface's own gap handles the spacing,
 * so this grid only ever widens.
 */
.ix-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--step) * 6);
  align-items: start;
}

@media (min-width: 940px) {
  .ix-columns { grid-template-columns: 1.1fr 1fr; }
}

.ix-card { min-width: 0; }

.ix-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--step) * 3);
  flex-wrap: wrap;
}

.ix-card-title {
  font-size: 19px;
  min-width: 0;
}

.ix-card-sub {
  margin-top: var(--step);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.ix-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/*
 * The one paragraph on this surface that carries a rule rather than a
 * description, marked by an accent rail so it does not read as more prose. The
 * rail is decoration and the words carry the meaning, which is the only reason
 * it may be --accent: that lime measures about 1.07:1 on the light page, so it
 * could never be used for text or for a state a reader has to distinguish.
 */
.ix-note {
  padding-left: calc(var(--step) * 3);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.ix-link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--divider-strong);
}

.ix-link:hover { text-decoration-color: var(--text-subtle); }

/* ------------------------------------------------------- stacked basket -- */

/*
 * The slices carry explicit percentage widths and are allowed to shrink. Flex
 * distributes negative space in proportion to each item's basis, so the 2px
 * gaps come out of the slices in proportion and the bar stays a true picture
 * of the weights instead of over-running its container.
 */
.ix-bar {
  display: flex;
  gap: 2px;
  height: 16px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  overflow: hidden;
}

.ix-bar-slice {
  flex: 0 1 auto;
  /* A 5% slice is still a slice. Without a floor it disappears on a 360px
   * phone, and a legend row would point at nothing. */
  min-width: 5px;
}

@media (min-width: 560px) {
  .ix-bar { height: 20px; }
}

.ix-legend {
  display: grid;
  gap: 0;
}

.ix-legend-row {
  display: grid;
  grid-template-columns: 14px 5ch minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 calc(var(--step) * 2);
  padding-block: calc(var(--step) * 2);
  font-size: 13.5px;
}

.ix-legend-row + .ix-legend-row { border-top: 1px solid var(--divider); }

/* The swatch keeps a hairline border: the palest lime in the ramp sits at
 * roughly 1.1:1 on a white card, and without an edge that slice would look
 * like a gap in the legend. */
.ix-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--divider);
  border-radius: 4px;
}

.ix-legend-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.ix-legend-name {
  min-width: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.ix-legend-sym {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}

/* The three chain rows are wrapped so `.card > * + *` spaces them as one block
 * and `.detail-row + .detail-row` keeps drawing their dividers. Without the
 * wrapper each row would gain a card-level margin and the dividers would sit in
 * the middle of the gaps. */
.ix-rows { min-width: 0; }

/* ---------------------------------------------------- launch checklist -- */

.ix-checklist {
  display: grid;
  gap: calc(var(--step) * 4);
}

.ix-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 calc(var(--step) * 3);
}

.ix-check-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
}

.ix-check-icon svg { width: 18px; height: 18px; }

/* Pending is drawn as a broken ring, so the four states are distinguishable
 * without colour alone. */
.ix-check.is-pending .ix-check-icon svg { stroke-dasharray: 2.5 3.5; }
.ix-check.is-done .ix-check-icon { color: var(--success); }
.ix-check.is-warn .ix-check-icon { color: var(--warning); }

.ix-check-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
}

.ix-check-state {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-subtle);
}

.ix-check.is-done .ix-check-state { color: var(--success); }
.ix-check.is-warn .ix-check-state { color: var(--warning); }

/* The body sits under the title, sharing its left edge with it rather than
 * with the icon, so the list reads as four labelled items. */
.ix-check-body {
  grid-column: 2 / -1;
  margin-top: calc(var(--step) * 0.5);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- narrow phone -- */

@media (max-width: 439px) {
  .ix-market { padding: calc(var(--step) * 3.5); }
  .ix-market-sym { font-size: 16px; }

  /* At 360px the state chip and the title cannot share a line without one of
   * them truncating, so the chip drops to its own line. It stays directly under
   * the title rather than under the body copy: a status that appears after four
   * lines of description reads as a footnote instead of as the item's state. */
  .ix-check { grid-template-columns: auto minmax(0, 1fr); }
  .ix-check-state { grid-column: 2 / -1; order: 2; margin-top: var(--step); }
  .ix-check-body { order: 3; }

  .ix-legend-row { font-size: 13px; }
}