/* ============================================================================
   Caçatal — the token's record page.

   CB is a real SPL token, so the page reads like a token explorer entry that
   happens to explain itself: the quote and the stakes first as a ledger
   strip, the explanation at reading measure, the four uses as the ledger
   movements they are (debit or credit, marked on each cell), and the mint
   itself as a checkable record with the chain named in Solana's own purple.

   Orange is spent only on money — the quote, the staked total, the one
   primary action. Everything else is the ink ramp on hairlines.
   ========================================================================= */

.cb {
  padding-block: var(--sp-8) var(--sp-16);
}

/* --- Head ---------------------------------------------------------------- */

.cb__head {
  margin-block-end: var(--sp-6);
}

.cb__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
}

/* The ticker: an identifier in the machine face, not a state — so a quiet
   raised tag, never a coloured chip. */
.cb__ticker {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-300);
  background: var(--ink-800);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
}

.cb__lede {
  margin: 0;
  max-width: 58ch;
  color: var(--ink-300);
}

/* The strip itself is the shared .ledger-strip; the figures are isolated here
   because a quoted price ("≈ US$ 0,0012") mixes words and digits, and the
   bidi algorithm must not reorder them under dir="rtl". */
.cb .ledger-strip__value {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Sections ------------------------------------------------------------ */

.cb__h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
}

.cb__about {
  margin-block-end: var(--sp-10);
}

/* --- The uses — four ledger movements ------------------------------------
   The strip idiom, not floating cards: cells separated by a 1px gap that
   shows the rule colour through, so separators resolve on both axes and in
   both writing directions. Explicit 1/2 columns: four cells must never land
   as three-plus-one beside a stray rule-coloured block.
   ------------------------------------------------------------------------ */

.cb-uses {
  margin-block-end: var(--sp-10);
}

.cb-uses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (min-width: 640px) {
  .cb-uses__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cb-use {
  min-width: 0;
  padding: var(--sp-5);
  background: var(--ink-850);
}

.cb-use__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
  color: var(--ink-300);
}

/* The direction of the movement: spending is quiet tertiary ink; earning
   takes the claimed green, and the mark itself is the word that rides with
   the colour. */
.cb-use__flow {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-400);
  direction: ltr;
  unicode-bidi: isolate;
}

.cb-use__flow--credit {
  color: var(--solved);
}

.cb-use__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-050);
}

.cb-use__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-300);
}

/* --- Acquiring — the mint as a record ------------------------------------ */

.cb-acquire__section {
  padding: var(--sp-5);
}

.cb-acquire__desc {
  margin: 0 0 var(--sp-5);
  max-width: 58ch;
  color: var(--ink-200);
}

/* Solana named in its own purple — the dot never travels without the word. */
.cb-chain {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-300);
  white-space: nowrap;
}

.cb-chain__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--brand-solana-purple);
  flex: none;
}

.cb-contract__label {
  margin: 0 0 var(--sp-2);
}

.cb-contract {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cb-contract__code {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-100);
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  word-break: break-all;
}

.cb-contract__copy {
  flex: none;
}

.cb-acquire__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* The flow's last step, as small print: bought CB becomes platform balance
   through a deposit. */
.cb-acquire__deposit p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-400);
}

.cb-acquire__deposit-link {
  color: var(--ink-200);
  text-decoration: underline;
  transition: color var(--dur-1) var(--ease);
}

.cb-acquire__deposit-link:hover {
  color: var(--ink-050);
}

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 767px) {
  .cb {
    padding-block: var(--sp-6) var(--sp-12);
  }

  .cb__head {
    margin-block-end: var(--sp-5);
  }

  .cb__title {
    font-size: var(--fs-2xl);
  }

  .cb__about,
  .cb-uses {
    margin-block-end: var(--sp-8);
  }
}

/* A money action deserves the whole thumb width on a phone. */
@media (max-width: 479px) {
  .cb-acquire__actions {
    flex-direction: column;
  }

  .cb-acquire__actions .btn {
    justify-content: center;
  }
}