/* Crate Intake. Extends styles.css + mint.css -- same terminal palette, same
   Courier, same hairline green borders. Nothing here redefines a base token.

   Desktop-first: this page's job is showing a collection, so the grid gets the
   room and the reference copy moves to a side rail. The mint page's single
   520px column is right for one button and wrong for sixteen tokens. */

/* styles.css gives every <section> 2-3.2rem of vertical padding and a bottom
   rule, which is right for a marketing page of stacked prose blocks and wrong
   for a dashboard. Neutralised here rather than by avoiding <section>, so the
   markup stays semantic. */
.stake-page main.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(1rem,3vw,1.6rem) clamp(0.9rem,3vw,1.5rem) 3rem;
}
/* Only the two bare layout sections need the reset. Targeting every section
   also stripped the padding off .holdings, .gate and .soon once those became
   <section> elements -- a blanket reset that outranks each panel's own rule. */
.stake-page section.lede,
.stake-page section.stats{
  padding:0;
  border-bottom:none;
}
/* No blanket border-bottom reset here: .holdings, .gate and .soon each set a
   full border and a rule on every section strips their bottom edge off. The
   two bare layout sections above are the only ones that inherit one. */

/* A class selector setting `display` outranks the UA [hidden] rule, so every
   panel below that sets display would otherwise ignore the hidden attribute.
   This keeps `hidden` authoritative for the whole page. */
.stake-page [hidden]{display:none !important;}

/* ---------- lede ---------- */
.lede{text-align:center;margin-bottom:clamp(1.2rem,3vw,1.8rem);}
.lede h1{
  font-size:clamp(1.5rem,4.5vw,2.4rem);
  letter-spacing:0.06em;
  color:var(--green);
  line-height:1.1;
  margin-bottom:0.7rem;
  text-wrap:balance;
}
.lede .tagline{
  color:var(--muted);
  font-size:clamp(0.78rem,1.9vw,0.85rem);
  line-height:1.6;
  max-width:62ch;      /* readable measure regardless of page width */
  margin:0 auto;
}

/* ---------- stat row ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(0.5rem,1.4vw,0.8rem);
  margin-bottom:clamp(0.9rem,2.5vw,1.2rem);
}
.stat{
  border:1px solid var(--line);
  background:var(--panel);
  padding:clamp(0.7rem,2vw,0.95rem);
  display:flex;flex-direction:column;gap:0.4rem;
  min-width:0;
}
.stat.accent{border-color:var(--green-dim);}
.stat-k{
  font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);line-height:1.2;
}
.stat-v{
  font-size:clamp(0.95rem,2.4vw,1.15rem);
  color:var(--text);line-height:1.25;
  font-variant-numeric:tabular-nums;
  /* Inline, not flex: these read as one sentence ("0 / 4444"), and flex
     items would break the baseline and insert gaps between the parts. */
  display:block;
}
.stat-v b{color:var(--green);font-weight:normal;}
.stat-sub{font-size:0.62rem;color:var(--muted);letter-spacing:0.06em;white-space:nowrap;}
.bar{height:2px;background:rgba(57,255,20,0.10);overflow:hidden;margin-top:auto;}
.bar > span{display:block;height:100%;background:var(--green);transition:width 0.5s ease;}

/* ---------- body stack ----------
   Two short reference cards pair off on one line, then the collection runs
   full width beneath them, then what comes next. Stacking all three in a rail
   beside the grid left a tall column of prose next to a short card. */
.duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(0.6rem,1.8vw,1rem);
  margin-bottom:clamp(0.6rem,1.8vw,1rem);
  align-items:stretch;
}
.duo .panel{display:flex;flex-direction:column;}
.stake-page main.wrap > section.holdings,
.stake-page main.wrap > section.gate,
.stake-page main.wrap > section.soon{
  margin-bottom:clamp(0.6rem,1.8vw,1rem);
}

/* ---------- disconnected gate ---------- */
.gate{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(2rem,6vw,3.4rem) clamp(1rem,4vw,2rem);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:0.6rem;
}
.gate-mark{
  font-size:clamp(1.6rem,5vw,2.4rem);color:var(--green-dim);
  letter-spacing:0.3em;line-height:1;margin-bottom:0.3rem;
  animation:pulse 2.4s ease-in-out infinite;
}
.gate h2{
  font-size:clamp(0.9rem,2.6vw,1.1rem);letter-spacing:0.04em;
  color:var(--text);font-weight:normal;line-height:1.35;text-wrap:balance;
  max-width:32ch;
}
.gate .fineprint{color:var(--muted);max-width:44ch;line-height:1.55;}
.gate-btn{width:auto;min-width:min(280px,80vw);margin-top:0.8rem;}

/* ---------- breed teaser body ---------- */
/* Two columns across the full 1180px ran ~85 characters a line, which is
   double a comfortable measure and left the block short and wide. Constrained
   to a readable measure per column, which makes it narrower and taller. */
.soon-body{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,3vw,2.4rem);align-items:start;
  text-align:center;
  max-width:760px;margin:0 auto 1.6rem;
}
.soon-body p{font-size:clamp(0.73rem,1.7vw,0.78rem);line-height:1.65;}
.soon .soon-btn{max-width:760px;margin-inline:auto;display:block;}

/* styles.css strips the bottom border off `section:last-of-type` so a
   marketing page does not end on a divider. That rule (0,1,1) outranks a bare
   class, so any card that happens to be the last section loses its bottom
   edge. These restore it at a specificity that wins. */
.stake-page .panel,
.stake-page .holdings,
.stake-page .gate{border-bottom:1px solid var(--line);}
.stake-page .soon{border-bottom:1px dashed rgba(57,255,20,0.22);}

/* ---------- panels ---------- */
.panel{
  border:1px solid var(--line);
  background:var(--panel);
  padding:clamp(0.85rem,2.4vw,1.15rem);
}
.panel h2{
  font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--green);font-weight:normal;line-height:1;margin-bottom:0.7rem;
}
.panel p{
  color:var(--muted);font-size:clamp(0.72rem,1.7vw,0.78rem);
  line-height:1.55;margin-bottom:0.6rem;
}
.panel p:last-of-type{margin-bottom:0;}
.panel b{color:var(--text);font-weight:normal;}
.panel .btn{width:100%;margin-top:0.8rem;}

/* ---------- token grid ---------- */
.holdings{display:block;border:1px solid var(--line);background:var(--panel);padding:clamp(0.85rem,2.4vw,1.15rem);}
.holdings-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:0.8rem;margin-bottom:0.9rem;flex-wrap:wrap;
  padding-inline:0.35rem;   /* let the title breathe off the card edge */
}
.holdings-head h2{
  font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--green);font-weight:normal;line-height:1;
}
.bulk{display:flex;gap:0.45rem;align-items:center;}
.selcount{
  font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);margin-right:0.2rem;font-variant-numeric:tabular-nums;
}
.mini{
  background:none;border:1px solid var(--line);color:var(--muted);
  font-family:inherit;font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  padding:0.34rem 0.55rem;border-radius:2px;cursor:pointer;line-height:1;
  transition:color 0.15s,border-color 0.15s;
}
.mini:hover:not(:disabled){color:var(--green);border-color:var(--green-dim);}
/* Unavailable controls grey out under the cursor rather than showing the
   not-allowed sign. The state reads as "off", not as an error. */
.mini:disabled{opacity:0.35;cursor:default;}
.mini:disabled:hover{
  background:rgba(143,165,150,0.09);
  border-color:rgba(143,165,150,0.28);
  color:var(--muted);
}
.mini:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

/* Five across on desktop, ten to a page. Sized so a full page is two tidy
   rows rather than an unbounded wall. */
.grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(0.45rem,1.2vw,0.7rem);
}

.card-t{
  position:relative;display:block;cursor:pointer;
  border:1px solid var(--line);border-radius:2px;
  background:#070908;overflow:hidden;
  transition:border-color 0.15s;
}
.card-t input{position:absolute;opacity:0;width:0;height:0;}
.card-t img{display:block;width:100%;aspect-ratio:1/1;image-rendering:pixelated;background:#070908;}
.card-t .id{
  display:block;text-align:center;font-size:0.6rem;letter-spacing:0.1em;
  color:var(--muted);padding:0.35rem 0.2rem;line-height:1;
  font-variant-numeric:tabular-nums;border-top:1px solid rgba(57,255,20,0.07);
}
.card-t .tag{
  position:absolute;top:0;left:0;right:0;
  font-size:0.5rem;letter-spacing:0.12em;text-transform:uppercase;
  text-align:center;padding:0.22rem;line-height:1;
  background:rgba(5,6,7,0.88);
}
.card-t.crated .tag{color:var(--green);}
.card-t.exiting .tag{color:#d8a13a;}
.card-t.ready .tag{color:var(--green);}
.card-t.locked .tag{color:#8a8a8a;}

.card-t:hover{border-color:var(--green-dim);}
.card-t:has(input:checked){outline:2px solid var(--green);outline-offset:-2px;}
.card-t:has(input:checked) .id{color:var(--green);}
.card-t:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px;}
/* Only genuinely unusable cards are disabled -- a token locked by a previous
   staking module, which this one cannot release. Everything else stays
   selectable and the action bar decides what applies. */
.card-t.disabled{opacity:0.35;pointer-events:none;}

/* ---------- legend ---------- */
.legend{
  display:flex;flex-wrap:wrap;gap:0.35rem 1.1rem;
  list-style:none;margin-top:0.9rem;padding:0;
}
.legend li{
  display:flex;align-items:center;gap:0.4rem;
  font-size:0.58rem;letter-spacing:0.08em;color:var(--muted);line-height:1.2;
}
.dot{width:7px;height:7px;border-radius:1px;flex:0 0 7px;}
.d-crated{background:var(--green);}
.d-exiting{background:#d8a13a;}
.d-ready{background:var(--green);box-shadow:0 0 5px var(--green);}
.d-locked{background:#8a8a8a;}

/* A card past its cooldown should look like it wants collecting. */
.card-t.ready{border-color:var(--green);}
.card-t.ready .tag{background:rgba(5,6,7,0.9);}

/* ---------- confirm dialog ---------- */
.confirm-body p{
  color:var(--muted);font-size:0.76rem;line-height:1.55;margin-bottom:0.6rem;
}
.confirm-body b{color:var(--text);font-weight:normal;}
.confirm-body .warn{color:#d8a13a;}
.confirm-body ul{margin:0 0 0.6rem 0;padding-left:1rem;}
.confirm-body li{
  color:var(--muted);font-size:0.76rem;line-height:1.55;margin-bottom:0.3rem;
}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:1rem;}
.confirm-actions .btn{width:100%;margin:0;}

/* ---------- pager ----------
   Always rendered, even at a single page, so the card does not change height
   the moment a holder crosses ten tokens. */
.pager{
  display:flex;align-items:center;justify-content:center;gap:0.8rem;
  margin-top:0.9rem;min-height:32px;
}
.pageinfo{
  font-size:0.6rem;letter-spacing:0.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:5ch;text-align:center;
}

/* ---------- loading ----------
   The grid reserves its full height and shows placeholders while the page's
   state and art load, so cards do not pop in one at a time. */
.card-t.skel{cursor:default;pointer-events:none;}
.card-t.skel .ph{
  display:block;width:100%;aspect-ratio:1/1;
  background:linear-gradient(100deg,#0a0d0b 30%,rgba(57,255,20,0.07) 50%,#0a0d0b 70%);
  background-size:220% 100%;
  animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{from{background-position:180% 0;}to{background-position:-80% 0;}}
.loadnote{
  display:flex;align-items:center;justify-content:center;gap:0.55rem;
  margin-top:0.9rem;font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);min-height:32px;
}
.spinner{
  width:11px;height:11px;border:1px solid var(--line);
  border-top-color:var(--green);border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .card-t.skel .ph{animation:none;background:#0a0d0b;}
  .spinner{animation:none;border-top-color:var(--green);}
}

/* ---------- action bar ---------- */
/* One gap, no rule. margin + padding + a hairline stacked into a banded
   strip between the grid and the buttons that read as a stray element. */
.actionbar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.5rem;
  margin-top:clamp(0.8rem,2vw,1rem);
}
.actionbar .btn{width:100%;margin:0;}
.btn.primary{border-color:var(--green);color:var(--green);}
.btn.primary:hover:not(:disabled){background:rgba(57,255,20,0.10);}
.btn:disabled{opacity:0.32;cursor:default;}
.btn:disabled:hover{
  background:rgba(143,165,150,0.09);
  border-color:rgba(143,165,150,0.28);
  color:var(--muted);
}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

.empty{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(1.4rem,4vw,2.2rem);text-align:center;
}
.empty p{color:var(--muted);font-size:clamp(0.78rem,2vw,0.84rem);margin-bottom:0.4rem;}

/* ---------- testnet banner ---------- */
.netbanner{
  background:#241a05;border-bottom:1px solid #b8892a;color:#d8a13a;
  text-align:center;padding:0.4rem 0.8rem;line-height:1.3;
  font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
}

/* ---------- coming-next teaser ---------- */
.soon{
  border-style:dashed;border-color:rgba(57,255,20,0.22);
  position:relative;
  /* Triple the vertical breathing room -- this card is a teaser, not a
     control surface, so it should feel roomier than the working panels. */
  padding-block:clamp(2.55rem,7.2vw,3.45rem);
}
/* The heading centres on the card itself; the stamp is lifted out of flow so
   it cannot pull the title off-centre. */
.soon-head{display:block;text-align:center;margin-bottom:1.6rem;}
.soon-head h2{margin-bottom:0;}
.soon .soon-stamp{
  position:absolute;top:clamp(0.7rem,2vw,0.95rem);right:clamp(0.85rem,2.4vw,1.15rem);
}
.soon-stamp{
  font-size:0.52rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:0.22rem 0.4rem;line-height:1;
  white-space:nowrap;
}
/* A disabled button at 30% opacity disappears against this ground. Keep it
   opaque and signal "not yet" with a dimmer accent and a locked cursor. */
/* `.panel .btn` (0,2,0) sets margin-top, so this needs equal specificity to
   win on source order. A bare .soon-btn would silently lose. */
.soon .soon-btn{
  opacity:1;cursor:default;
  border-color:var(--green-dim);color:var(--green-dim);
  background:rgba(57,255,20,0.05);letter-spacing:0.18em;
  margin-top:5px;   /* slight separation from the copy above */
}
.soon .soon-btn:hover{
  background:rgba(143,165,150,0.09);
  border-color:rgba(143,165,150,0.28);
  color:var(--muted);
}

/* ---------- notice modal ---------- */
.notice-card{max-width:min(560px,92vw);}
.notice-card .modal-head{border-bottom:1px solid var(--line);padding-bottom:0.7rem;}
.notice-card .modal-head h3{color:#d8a13a;}
.notice-body{margin:0.9rem 0;}
.notice-body p{
  color:var(--muted);font-size:0.78rem;line-height:1.6;margin-bottom:0.7rem;
}
.notice-body p:last-child{margin-bottom:0;}
.notice-body b{color:var(--text);font-weight:normal;}
.notice-body .fineprint{color:#6d8478;font-size:0.72rem;}
.ack{
  display:flex;align-items:flex-start;gap:0.6rem;cursor:pointer;
  border:1px solid var(--line);border-radius:2px;
  padding:0.7rem 0.8rem;margin-top:0.4rem;
}
.ack:hover{border-color:var(--green-dim);}
.ack input{
  appearance:none;-webkit-appearance:none;
  width:15px;height:15px;flex:0 0 15px;margin-top:0.1rem;
  border:1px solid var(--green-dim);border-radius:2px;background:none;cursor:pointer;
  display:grid;place-content:center;
}
.ack input::before{
  content:"";width:8px;height:8px;transform:scale(0);
  background:var(--green);transition:transform 0.12s ease;
}
.ack input:checked::before{transform:scale(1);}
.ack input:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.ack span{color:var(--muted);font-size:0.74rem;line-height:1.5;}
.notice-card .btn{width:100%;margin-top:0.8rem;}

/* ---------- toasts ----------
   A status panel at the top of the document meant a click on the action bar
   reported its result off-screen. These are pinned to the viewport instead. */
.toasts{
  position:fixed;z-index:300;
  right:clamp(0.6rem,2vw,1.1rem);bottom:clamp(0.6rem,2vw,1.1rem);
  display:flex;flex-direction:column;gap:0.5rem;
  width:min(380px,calc(100vw - 1.4rem));
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  border:1px solid var(--line);border-left-width:2px;
  background:#0b0d0e;
  padding:0.8rem 0.9rem;
  box-shadow:0 8px 28px rgba(0,0,0,0.6);
  display:grid;grid-template-columns:1fr auto;gap:0.2rem 0.6rem;
  animation:toast-in 0.22s ease-out;
}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.toast.out{animation:toast-out 0.2s ease-in forwards;}
@keyframes toast-out{to{opacity:0;transform:translateY(6px);}}
.toast h3{
  font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;
  font-weight:normal;line-height:1.2;margin:0;
}
.toast p{
  grid-column:1/-1;
  color:var(--muted);font-size:0.73rem;line-height:1.5;margin:0.35rem 0 0;
}
.toast p:empty{display:none;}
.toast a{color:var(--green);border-bottom:1px solid var(--green-dim);}
/* A 1-character glyph is not a hit target. */
.toast .x{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:1.05rem;line-height:1;
  width:28px;height:28px;margin:-6px -6px 0 0;
  display:flex;align-items:center;justify-content:center;
  align-self:start;border-radius:2px;
}
.toast .x:hover{color:var(--green);background:rgba(57,255,20,0.08);}
.toast .x:focus-visible{outline:2px solid var(--green);outline-offset:1px;}
.toast.good{border-left-color:var(--green);}
.toast.good h3{color:var(--green);}
.toast.warn{border-left-color:#b8892a;}
.toast.warn h3{color:#d8a13a;}
.toast.bad{border-left-color:#8f2f2f;}
.toast.bad h3{color:#d05a5a;}
@media (prefers-reduced-motion:reduce){
  .toast,.toast.out{animation:none;}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:760px){
  .duo{grid-template-columns:minmax(0,1fr);}
  .soon-body{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:1000px){
  .actionbar{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .actionbar{grid-template-columns:minmax(0,1fr);}
  .holdings-head{align-items:flex-start;flex-direction:column;gap:0.6rem;}
  /* 44px minimum touch target once these are thumb-operated. */
  .actionbar .btn,.panel .btn{min-height:44px;}
  .mini{min-height:36px;padding-inline:0.7rem;}
}
@media (max-width:400px){
  .stats{grid-template-columns:minmax(0,1fr);}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;}
}