/* ============================================================================
   NPB 3D publish console — Edge only
   ============================================================================
   An admin tool, not a research page. It still uses the site's tokens, because
   there is one design system and a console that looks foreign to the site it
   publishes to is a console people mistrust.
   ========================================================================= */

.pub{max-width:44rem}

.pubdrop{
  border:1.6px dashed #c7ccd8;border-radius:14px;
  padding:2.4rem 1.2rem;text-align:center;cursor:pointer;
  background:linear-gradient(#fbfcfe,#f7f8fb);
  transition:border-color .16s,background .16s;
}
.pubdrop:hover,.pubdrop.hot{border-color:var(--npb-red);background:var(--surface)}
.pubdrop .t1{font-weight:600;font-size:.98rem}
.pubdrop .t2{color:var(--ink-3);font-size:.82rem;margin-top:.3rem}

.pubmsg{
  margin-top:1.1rem;padding:.8rem .95rem;border-radius:var(--r-btn);
  font-size:.84rem;line-height:1.5;border:1px solid var(--line);background:var(--surface);
}
.pubmsg code{background:var(--plane-2);padding:.05rem .3rem;border-radius:4px}
.pubmsg.ok{border-color:rgba(10,125,60,.3);background:var(--pos-bg)}
.pubmsg.bad{border-color:rgba(192,21,48,.3);background:var(--neg-bg);color:var(--ink)}
.pubmsg.busy{color:var(--ink-2)}
.pubmsg[hidden]{display:none}

.pubtbl{width:100%;border-collapse:collapse;margin-top:.7rem;font-size:.78rem}
.pubtbl th{
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;padding:.25rem .5rem;border-bottom:1px solid var(--line);
}
.pubtbl td{padding:.25rem .5rem;border-bottom:1px solid var(--line-2);text-align:right;
  font-variant-numeric:tabular-nums}
.pubtbl th.l,.pubtbl td.l{text-align:left}
.pubtbl tr:last-child td{border-bottom:0}

.pubnote{margin:.7rem 0 0;font-size:.74rem;color:var(--ink-3);line-height:1.5}

.pubgo{
  margin-top:1.1rem;font:inherit;font-size:.86rem;font-weight:600;
  background:var(--npb-red);border:1px solid var(--npb-red);color:#fff;
  padding:.55rem 1.1rem;border-radius:var(--r-btn);cursor:pointer;
}
.pubgo:hover{background:var(--npb-red-deep);border-color:var(--npb-red-deep)}
.pubgo:disabled{opacity:.6;cursor:default}
.pubgo[hidden]{display:none}

.pubsteps{margin:1.6rem 0 0;padding:0 0 0 1.1rem;color:var(--ink-3);font-size:.82rem;line-height:1.7}
.pubsteps b{color:var(--ink-2)}

/* ---- preview ---------------------------------------------------------------
   The console borrows 3D's own stylesheet, so the preview needs almost nothing
   of its own — only the frame around it and the tier switch. */
.pubpreview{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.pubpreview[hidden]{display:none}

.pubtier{display:flex;align-items:center;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.pubtier .lab{
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-right:.3rem;
}
.tierbtn{
  font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  padding:.3rem .7rem;border-radius:var(--r-btn);
}
.tierbtn:hover{border-color:#c7ccd8;color:var(--ink)}
/* The tier being previewed, not a brand accent: red here means "this is the
   public one", which is the state worth noticing. */
.tierbtn.is-on{background:var(--npb-red);border-color:var(--npb-red);color:#fff}

/* The preview is not the page it is previewing. Keep 3D's own chrome quiet so
   nobody mistakes this for the live site. */
.pubpreview .npb3d-bar{border-bottom-color:var(--line-2)}
.pubpreview .npb3d{
  background:var(--plane);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:1rem 1.1rem 1.4rem;
}