/* ==========================================================================
   Status Strip — live minting counter
   counters.md §5.2
   ========================================================================== */

/* Strip lives inside the mural .card (after .footer), so the card keeps
   height:100% and the full height chain (card → center → media-frame) stays
   intact. applyMuralMinSize and 100cqh both get correct frame dimensions. */
.status-strip {
  font-family: var(--font-display);
  font-size: 10px;
  display: grid;
  grid-template-columns: minmax(110px, 0.65fr) 2fr minmax(200px, 1fr);
  gap: 20px;
  align-items: center;
  /* Separate from the card footer above with a subtle top border */
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 8px;
}

/* Loading state — dim placeholders to signal data is incoming */
.status-strip[data-mode="loading"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Mode-driven lane visibility — display:none per spec (§5.2).
   Height stability is maintained by min-height on .ss-lanes (see below). */
.status-strip[data-mode="free"]  .ss-lane-paid { display: none; }
.status-strip[data-mode="paid"]  .ss-lane-free { display: none; }

/* --------------------------------------------------------------------------
   Left: CLAIMED counter
   -------------------------------------------------------------------------- */
.ss-claimed {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ss-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.ss-value {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-strong);
  font-family: var(--font-mono);
  line-height: 1.1;
}

.ss-muted {
  color: var(--muted);
  font-size: 11px;
}

.ss-sublabel {
  font-size: 9px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Center: lanes
   -------------------------------------------------------------------------- */
.ss-lanes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Hold the two-lane height so switching to single-lane mode
     doesn't collapse/grow the strip (≈ header×2 + grid + bars + gap). */
  min-height: 90px;
}

.ss-lane-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.ss-lane-title {
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: bold;
  color: var(--text-strong);
  text-transform: uppercase;
}

.ss-lane-meta {
  font-size: 9px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0;
  margin-left: 4px;
}

.ss-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
}

.ss-dot-free { background: #185FA5; }
.ss-dot-paid { background: #2c6cb7; }

.ss-lane-free.is-exhausted .ss-dot-free {
  background: transparent;
  outline: 1px solid var(--muted);
  outline-offset: -1px;
}
.ss-lane-free.is-exhausted .ss-lane-title { color: var(--muted); }

/* Free grid: 40 micro-squares in one row */
.ss-free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 10px);
  gap: 2px;
}

.ss-free-cell {
  width: 10px;
  height: 10px;
  background: #185FA5;
  transition: background-color 400ms ease-out;
}

.ss-free-cell.is-claimed { background: #5F5E5A; }

/* Discount tiers: 3 bars */
.ss-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ss-tier { display: flex; flex-direction: column; gap: 4px; }

.ss-tier-bar {
  position: relative;
  height: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  overflow: hidden;
}

.ss-tier-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: #2c6cb7;
  transition: width 400ms ease-out;
}

.ss-tier.is-done .ss-tier-bar  { background: #5F5E5A; border-color: #5F5E5A; }
.ss-tier.is-done .ss-tier-fill { display: none; }

.ss-tier.is-active .ss-tier-bar  { background: #E6F1FB; border-color: #1f4f8f; }

.ss-tier-label {
  font-size: 9px;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--muted);
}

.ss-tier.is-active .ss-tier-label { color: #1f4f8f; font-weight: bold; }
.ss-tier.is-done   .ss-tier-label { color: #5F5E5A; }

/* Single-lane mode: give the active lane a bit more breathing room */
.status-strip[data-mode="free"]  .ss-free-cell  { min-height: 10px; }
.status-strip[data-mode="paid"]  .ss-tier-bar   { height: 16px; }

/* --------------------------------------------------------------------------
   Right: CTA
   -------------------------------------------------------------------------- */
.ss-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-btn {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid currentColor;
  background: transparent;
  font-family: var(--font-display);
  font-size: 10px;
  cursor: pointer;
  border-radius: 0;
  text-align: left;
  line-height: 1.3;
  text-decoration: none;
}

.ss-btn-free {
  color: #0C447C;
  border-color: #185FA5;
  background: #E6F1FB;
}

/* Paid CTA — matches site's btn-primary (dark blue gradient, white text) */
.ss-btn-paid {
  color: #fff;
  border-color: #1f4f8f;
  background: linear-gradient(to bottom, #6aa8ee 0%, #2c6cb7 50%, #1f4f8f 100%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.ss-btn-paid:hover  { filter: brightness(1.07); }
.ss-btn-paid:active { background: linear-gradient(to bottom, #1f4f8f 0%, #2c6cb7 50%, #6aa8ee 100%); }

/* Некликабельная плашка на странице buy — тот же вид, но без интерактива */
.ss-btn-static {
  cursor: default;
}

.ss-btn-sub {
  display: block;
  font-size: 8px;
  font-weight: normal;
  margin-top: 3px;
  opacity: 0.8;
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.ss-alt-link {
  font-size: 9px;
  color: var(--muted);
  text-decoration: underline;
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Mobile single-tier bar (hidden on desktop)
   -------------------------------------------------------------------------- */
.ss-mobile-tier { display: none; }

/* --------------------------------------------------------------------------
   Mobile — < 720px
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .status-strip {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Force 2 rows × 20 cells per acceptance criterion */
  .ss-free-grid {
    grid-template-columns: repeat(20, 10px);
  }

  /* Hide full tier ladder; replace with single active-tier bar */
  .ss-tiers { display: none; }

  .ss-mobile-tier {
    display: block;
    margin-top: 6px;
  }

  .ss-mobile-tier-bar {
    position: relative;
    height: 12px;
    background: #E6F1FB;
    border: 1px solid #1f4f8f;
    overflow: hidden;
  }

  .ss-mobile-tier-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0;
    background: #2c6cb7;
    transition: width 400ms ease-out;
  }

  .ss-mobile-tier-label {
    font-size: 9px;
    color: #1f4f8f;
    font-family: var(--font-mono);
    margin-top: 3px;
    letter-spacing: 0;
  }

  .ss-btn {
    padding: 11px 12px;
    font-size: 11px;
    min-height: 44px;
  }

  .ss-cta {
    flex-direction: column;
    /* Reserve height for the CTA button on mobile (its own grid row),
       prevents layout shift when JS inserts the button after first fetch. */
    min-height: 52px;
  }
}