/* Practice Carry + Sovereign Ladder + Constellation trend */

.practice-carry {
  margin: 1.1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink, #1a1a1a) 12%, transparent);
  animation: pc-in 0.55s ease both;
}
@keyframes pc-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.pc-kicker,
.sl-kicker,
.ct-kicker {
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 48%, transparent);
  margin-bottom: 0.35rem;
}
.pc-text {
  font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink, #1a1a1a);
  margin: 0 0 0.4rem;
}
.pc-meta {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 45%, transparent);
  margin-bottom: 0.7rem;
}
.pc-actions,
.sl-actions,
.ct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.pc-btn,
.sl-cta,
.sl-dismiss,
.ct-btn {
  font: inherit;
  font-size: 0.84rem;
  border: 1px solid color-mix(in srgb, var(--ink, #1a1a1a) 22%, transparent);
  background: transparent;
  color: var(--ink, #1a1a1a);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pc-btn:hover,
.sl-cta:hover,
.ct-btn:hover {
  background: color-mix(in srgb, var(--ink, #1a1a1a) 6%, transparent);
}
.pc-ghost,
.sl-dismiss {
  border-color: transparent;
  opacity: 0.72;
}
.pc-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.sovereign-ladder {
  margin: 1.15rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink, #1a1a1a) 12%, transparent);
  animation: pc-in 0.6s ease both;
}
.sl-title,
.ct-title {
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: var(--ink, #1a1a1a);
}
.sl-body,
.ct-body {
  font-size: 0.92rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 72%, transparent);
  margin: 0 0 0.75rem;
  max-width: 36rem;
}
.sl-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  padding: 0;
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--ink, #1a1a1a) 42%, transparent);
}
.sl-steps li.is-done {
  color: color-mix(in srgb, var(--ink, #1a1a1a) 55%, transparent);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.sl-steps li.is-here {
  color: var(--ink, #1a1a1a);
  font-weight: 600;
}
.sl-cta {
  display: inline-block;
}

.constellation-trend {
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  animation: pc-in 0.65s ease both;
}
.ct-forks {
  display: grid;
  gap: 0.55rem;
  margin: 0.75rem 0 0.9rem;
}
.ct-fork {
  text-align: left;
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--ink, #1a1a1a) 16%, transparent);
  background: color-mix(in srgb, var(--paper, #f7f4ef) 88%, #fff);
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ct-fork:hover {
  border-color: color-mix(in srgb, var(--ink, #1a1a1a) 35%, transparent);
  background: color-mix(in srgb, var(--paper, #f7f4ef) 70%, #fff);
}
.ct-fork strong {
  display: block;
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.ct-fork span {
  display: block;
  font-size: 0.84rem;
  opacity: 0.78;
}

@media (max-width: 640px) {
  .pc-text { font-size: 0.98rem; }
  .sl-title, .ct-title { font-size: 1.05rem; }
}