/* Crown Caliber — css/mint.css   (the sealed build drops this file)
   The mint box inside #mint-root. tokens.css variables only; nothing here
   reaches outside the root. */

#mint-root .mb {
  display: grid;
  gap: var(--s-3);
  width: 100%;
  margin: 0;
  padding: var(--panel-pad);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  color: var(--ink-2);
  font: var(--w-reg) var(--fs-md)/var(--lh-snug) var(--font-ui);
}
#mint-root .mb [hidden] { display: none !important; }
#mint-root .mb p { margin: 0; }

/* ---- head: the label and the live count ---- */
#mint-root .mb-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
#mint-root .mb-k {
  font: var(--w-semi) var(--fs-label)/1.4 var(--font-ui);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-ink);
}
#mint-root .mb-count { display: flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; }
#mint-root .mb-n {
  font: var(--w-med) var(--fs-count)/1 var(--font-display);
  font-variant-numeric: var(--num); color: var(--ink);
}
#mint-root .mb-n.is-unknown { font: var(--w-reg) var(--fs-xl)/1 var(--font-ui); color: var(--ink-4); }
#mint-root .mb-of { font: var(--w-reg) var(--fs-sm)/1 var(--font-num); font-variant-numeric: var(--num); color: var(--ink-3); }

#mint-root .mb-bar { position: relative; height: 2px; background: var(--paper-3); overflow: hidden; }
#mint-root .mb-bar i { display: block; height: 100%; width: 0; background: var(--brass); transition: width var(--dur-3) var(--ease); }

#mint-root .mb-rule { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink-3); }
#mint-root .mb-rule b { color: var(--ink); font-weight: var(--w-med); }

/* ---- the state line: a dot and a tinted hairline, never a side rail ---- */
#mint-root .mb-state {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--inset-bg);
  border: 1px solid var(--inset-line);
  border-radius: var(--r-1);
  font-size: var(--fs-md); line-height: 1.45; color: var(--ink-2);
}
#mint-root .mb-state b { color: var(--ink); font-weight: var(--w-med); font-variant-numeric: var(--num); }
#mint-root .mb-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); transform: translateY(-1px); }
#mint-root .mb-state[data-tone="ok"]   { border-color: var(--ok-line);   background: var(--ok-soft); }
#mint-root .mb-state[data-tone="warn"] { border-color: var(--warn-line); background: var(--warn-soft); }
#mint-root .mb-state[data-tone="bad"]  { border-color: var(--bad-line);  background: var(--bad-soft); }
#mint-root .mb-state[data-tone="wait"] { border-color: var(--wait-line); background: var(--wait-soft); }
#mint-root .mb-state[data-tone="ok"] .mb-dot   { background: var(--ok); }
#mint-root .mb-state[data-tone="warn"] .mb-dot { background: var(--warn); }
#mint-root .mb-state[data-tone="bad"] .mb-dot  { background: var(--bad); }
#mint-root .mb-state[data-tone="wait"] .mb-dot { background: var(--wait); animation: mb-beat 1.4s var(--ease) infinite; }
@keyframes mb-beat { 50% { opacity: .25; } }

/* ---- buttons ---- */
#mint-root .mb-go,
#mint-root .mb-buy-btn {
  min-height: var(--control-h);
  border-radius: var(--r-1);
  font: var(--w-semi) var(--fs-btn)/1 var(--font-ui);
  letter-spacing: var(--track-btn); text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
#mint-root .mb-go {
  width: 100%; padding: 0 var(--s-5);
  background: var(--act); color: var(--act-ink); border: 1px solid var(--act-line);
}
#mint-root .mb-go:hover:not(:disabled) { background: var(--act-hover); }
#mint-root .mb-go[data-look="wait"] { background: var(--wait-soft); color: var(--wait); border-color: var(--wait-line); cursor: default; }
#mint-root .mb-go[data-look="dead"],
#mint-root .mb-go:disabled:not([data-look="wait"]) { background: var(--act-dead); color: var(--act-dead-ink); border-color: var(--act-dead-line); cursor: default; }
#mint-root button:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---- the BUY row: secondary under a live free claim, primary otherwise ---- */
#mint-root .mb-buy { display: grid; gap: var(--s-2); }
#mint-root .mb-buy-k { font-size: var(--fs-xs); color: var(--ink-3); }
#mint-root .mb-buy-row { display: flex; gap: var(--s-2); }
#mint-root .mb-step {
  flex: none; display: flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--inset-bg);
}
#mint-root .mb-q {
  width: 40px; height: calc(var(--control-h) - 2px);
  padding: 0; border: 0; background: transparent; border-radius: var(--r-1);
  font: var(--w-reg) var(--fs-xl)/1 var(--font-ui); color: var(--ink); cursor: pointer;
}
#mint-root .mb-q:hover:not(:disabled) { background: var(--act-2-hover); }
#mint-root .mb-q:disabled { color: var(--ink-4); cursor: default; }
#mint-root .mb-qty {
  min-width: 26px; text-align: center;
  font: var(--w-med) var(--fs-lg)/1 var(--font-num); font-variant-numeric: var(--num); color: var(--ink);
}
#mint-root .mb-buy-btn {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0 var(--s-4);
  background: var(--act-2); color: var(--act-2-ink); border: 1px solid var(--act-2-line);
}
#mint-root .mb-buy-btn:hover:not(:disabled) { background: var(--act-2-hover); }
#mint-root .mb-buy.is-primary .mb-buy-btn { background: var(--act); color: var(--act-ink); border-color: var(--act-line); }
#mint-root .mb-buy.is-primary .mb-buy-btn:hover:not(:disabled) { background: var(--act-hover); }
#mint-root .mb-buy-btn:disabled,
#mint-root .mb-buy.is-primary .mb-buy-btn:disabled { background: var(--act-dead); color: var(--act-dead-ink); border-color: var(--act-dead-line); cursor: default; }
#mint-root .mb-cost {
  font: var(--w-med) var(--fs-sm)/1 var(--font-num); font-variant-numeric: var(--num);
  letter-spacing: 0; text-transform: none; color: inherit; white-space: nowrap;
}

/* ---- what just happened ---- */
#mint-root .mb-msg { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-3); }
#mint-root .mb-msg b { color: inherit; font-weight: var(--w-semi); }
#mint-root .mb-msg[data-tone="ok"] { color: var(--ok); }
#mint-root .mb-msg[data-tone="bad"] { color: var(--bad); }
#mint-root .mb-tx {
  font: var(--w-semi) var(--fs-xs)/1.4 var(--font-num); letter-spacing: .04em;
  color: var(--ink-3); overflow-wrap: anywhere;
}
#mint-root .mb-tx a { color: var(--brass-ink); }
#mint-root .mb-foot {
  padding-top: var(--s-3); border-top: 1px solid var(--line);
  font: var(--w-semi) var(--fs-label)/1.5 var(--font-ui);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  #mint-root .mb-state[data-tone="wait"] .mb-dot { animation: none; }
}