/* ============================================================
   BOX — component classes
   Ported from Mission Control with no visual drift. Hardcoded
   colors are rewritten to the --bx-* tokens; spacing, borders,
   and radii are kept exactly as the source. Requires tokens.css.

   Mission Control is a fixed, zero-scroll viewport. BOX
   generalizes the shell for a normal scrolling page: the
   background layers and registration corners stay fixed behind
   content, and a .bx-container wrapper bounds the column.
   ============================================================ */

/* ---- base reset and body type ---- */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bx-bg); color: var(--bx-text);
  font-family: var(--bx-font-sans);
  line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3 { color: var(--bx-heading); margin: 0; }

/* ---- background layers (fixed behind a scrolling page) ---- */
#waves, .grain, .vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#waves { width: 100%; height: 100%; }
.grain {
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px; animation: grain 1.4s steps(5) infinite;
}
@keyframes grain { 0%{background-position:0 0} 25%{background-position:-7% -11%} 50%{background-position:-18% 7%} 75%{background-position:10% -6%} 100%{background-position:0 0} }
.vignette { background: radial-gradient(ellipse 120% 90% at 50% 30%, transparent 38%, rgba(1,1,2,.62) 100%); }

/* ---- registration corners (fixed at the viewport corners) ---- */
.reg { position: fixed; z-index: 3; width: 12px; height: 12px; pointer-events: none; opacity: .7; }
.reg::before,.reg::after { content:""; position:absolute; background: var(--bx-border-strong); }
.reg::before { left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.reg::after { top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }
.reg.tl{top:18px;left:18px} .reg.tr{top:18px;right:18px} .reg.bl{bottom:18px;left:18px} .reg.br{bottom:18px;right:18px}
@media (max-width:760px){ .reg{display:none} }

/* ---- mono (tracked-caps label) ---- */
.mono { font-family: var(--bx-font-mono); font-weight:500; letter-spacing: var(--bx-mono-track); text-transform:uppercase; }

/* ---- container: bounds the content column on a scrolling page ---- */
.bx-container { position: relative; z-index: 1; max-width: 1320px; width: 100%; margin: 0 auto; padding: 30px 40px 22px; }
@media (max-width:760px){ .bx-container{ padding: 20px 18px 16px; } }

/* ---- brand lockup (official CreatixBox cube + wordmark) ---- */
.lockup { display:inline-flex; align-items:center; gap:14px; }
.logo-cube { height:30px; width:auto; flex-shrink:0; display:block; }
.logo-word { height:14px; width:auto; display:block; }

/* ---- panel ---- */
.panel { position:relative; background:var(--bx-surface); border:1px solid var(--bx-border); border-radius:var(--bx-radius); padding:20px 22px; }

/* ---- card (with top-left accent tick) ---- */
.card { position:relative; background:var(--bx-surface); border:1px solid var(--bx-border); border-radius:var(--bx-radius); padding:18px 18px 16px; display:flex; flex-direction:column; overflow:hidden; transition:border-color .18s ease-out; }
.card::before { content:""; position:absolute; top:-1px; left:18px; width:22px; height:1px; background:var(--bx-accent-fg); opacity:.6; }
.card:hover { border-color:var(--bx-border-strong); }

/* ---- link card ---- */
.linkcard { background:rgba(0,0,0,.3); border:1px solid var(--bx-border-strong); border-radius:var(--bx-radius); padding:12px 14px; display:flex; flex-direction:column; gap:9px; min-width:200px; transition:border-color .15s ease-out; }
.linkcard:hover { border-color:var(--bx-accent-fg); }
.lc-open { font-family:var(--bx-font-mono); font-size:11.5px; font-weight:500; letter-spacing:.04em; color:var(--bx-accent-soft); text-decoration:none; display:flex; align-items:center; gap:7px; }
.lc-open:hover { color:var(--bx-heading); }
.lc-open .ext { font-size:10px; color:var(--bx-muted); }

/* ---- button (ported from the gate button) ---- */
.bx-btn {
  display:inline-block; padding: 12px 14px; border: 1px solid var(--bx-accent-fg); border-radius: 3px;
  background: transparent; color: var(--bx-accent-soft); cursor: pointer;
  font-family: var(--bx-font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--bx-mono-track); text-transform: uppercase;
  transition: background .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
}
.bx-btn:hover { background: var(--bx-accent-fg); color: var(--bx-on-accent); box-shadow: 0 0 26px rgba(182,189,204,.22); }

/* ---- input ---- */
.bx-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--bx-border-strong); border-radius: 3px;
  font-size: 15px; font-family: inherit; background: rgba(0,0,0,.32); color: var(--bx-heading);
}
.bx-input::placeholder { color: var(--bx-muted); }
.bx-input:focus { outline: none; border-color: var(--bx-accent-fg); box-shadow: 0 0 0 1px var(--bx-accent-fg); }

/* ---- label ---- */
.bx-label { display: block; color: var(--bx-muted); margin-bottom: 9px; font-size: 11px; }

/* ---- hairline divider ---- */
.bx-divider { height:1px; border:0; margin:0; background:var(--bx-border); }
.bx-divider.strong { background:var(--bx-border-strong); }

/* ============================================================
   EXPANDED COMPONENTS
   Ported from Mission Control and the Machine Setup site with
   no visual drift. Hardcoded colors are rewritten to --bx-*
   tokens; the few intentional literals (rgba(0,0,0,*) fills,
   #DCDEE6 code text) are kept to match the source exactly.
   ============================================================ */

/* ---- action button (Mission Control .vbtn) ---- */
/* the Upload / New / primary-action button in a toolbar */
.bx-action-btn {
  font-family:var(--bx-font-mono); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bx-accent-soft); background:rgba(182,189,204,.06); border:1px solid var(--bx-border-strong);
  border-radius:var(--bx-radius); padding:8px 14px; cursor:pointer;
  transition:border-color .15s ease-out, background .15s ease-out;
}
.bx-action-btn:hover { border-color:var(--bx-accent-fg); background:rgba(182,189,204,.12); }
.bx-action-btn:disabled { opacity:.5; cursor:default; }

/* ---- action link (Mission Control .vlink / .vlink.vdel) ---- */
/* Preview / Download / Delete row actions */
.bx-action-link {
  font-family:var(--bx-font-mono); font-size:9px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bx-muted); background:none; border:1px solid transparent; border-radius:3px; padding:5px 9px; cursor:pointer;
  transition:color .15s ease-out, border-color .15s ease-out;
}
.bx-action-link:hover { color:var(--bx-accent-soft); border-color:var(--bx-border-strong); }
.bx-action-link.danger:hover { color:var(--bx-danger); border-color:var(--bx-danger-line); }

/* ---- copy button (Mission Control .lc-copy, Machine Setup .cp / .copy-btn) ---- */
/* a square icon button; .sm is the inline 21px size, .lg is the code-block 28px size */
.bx-copy {
  flex-shrink:0; width:22px; height:22px; padding:0; display:inline-grid; place-content:center;
  border:1px solid var(--bx-border-strong); background:rgba(0,0,0,.3); color:var(--bx-muted); border-radius:var(--bx-radius); cursor:pointer;
  transition:color .15s ease-out, border-color .15s ease-out, background .15s ease-out;
}
.bx-copy:hover { color:var(--bx-accent-soft); border-color:var(--bx-accent-fg); }
.bx-copy.done { color:var(--bx-on-accent); background:var(--bx-accent-fg); border-color:var(--bx-accent-fg); }
.bx-copy svg { width:11px; height:11px; display:block; }
.bx-copy.sm { width:21px; height:21px; }
.bx-copy.lg { width:28px; height:28px; border-radius:5px; }
.bx-copy.lg svg { width:14px; height:14px; }

/* ---- checkbox (Machine Setup .checklist input) ---- */
.bx-checkbox {
  appearance:none; -webkit-appearance:none; width:20px; height:20px; flex-shrink:0; cursor:pointer;
  background:rgba(0,0,0,.32); border:1.5px solid var(--bx-muted); border-radius:var(--bx-radius);
  display:grid; place-content:center;
  transition:border-color .15s ease-out, background .15s ease-out, box-shadow .15s ease-out;
}
.bx-checkbox::before {
  content:""; width:11px; height:11px; transform:scale(0); transition:transform .12s ease-out;
  background:var(--bx-on-accent);
  clip-path:polygon(13% 46%, 0 62%, 40% 100%, 100% 17%, 85% 2%, 38% 70%);
}
.bx-checkbox:hover { border-color:var(--bx-accent-fg); }
.bx-checkbox:checked { border-color:var(--bx-accent-fg); background:var(--bx-accent-fg); box-shadow:0 0 8px rgba(182,189,204,.35); }
.bx-checkbox:checked::before { transform:scale(1); }
.bx-checkbox:focus-visible { outline:2px solid var(--bx-accent-soft); outline-offset:2px; }

/* ---- code block + inline code (Machine Setup pre / code / .copy-btn) ---- */
.bx-pre {
  position:relative; background:var(--bx-surface); border:1px solid var(--bx-border); border-radius:var(--bx-radius);
  padding:16px 18px; padding-right:52px; margin:16px 0;
  white-space:pre-wrap; overflow-wrap:anywhere;
  font-family:var(--bx-font-mono); font-size:13px; line-height:1.6; color:#DCDEE6;
}
.bx-pre::before { content:""; position:absolute; top:-1px; left:18px; width:26px; height:1px; background:var(--bx-accent-fg); opacity:.7; }
.bx-pre .bx-copy { position:absolute; top:9px; right:9px; }
.bx-pre code { background:none; color:inherit; padding:0; }
.bx-code {
  font-family:var(--bx-font-mono); font-size:.88em;
  background:rgba(182,189,204,.1); color:var(--bx-accent-soft); padding:2px 6px; border-radius:3px;
}

/* ---- note callout (Machine Setup .note) ---- */
.bx-note {
  background:rgba(182,189,204,.04); border:1px solid rgba(182,189,204,.18); border-radius:var(--bx-radius);
  padding:13px 17px; color:var(--bx-text);
}

/* ---- inline link (Machine Setup a) ---- */
.bx-link { color:var(--bx-accent-soft); text-decoration:none; border-bottom:1px solid rgba(216,220,230,.32); transition:border-color .15s; }
.bx-link:hover { border-color:var(--bx-accent-soft); }

/* ---- chip (Machine Setup .toc a) ---- */
.bx-chip {
  display:inline-block; font-family:var(--bx-font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bx-text); text-decoration:none; padding:6px 12px; border:1px solid var(--bx-border-strong); border-radius:3px;
  transition:border-color .15s ease-out, color .15s ease-out, background .15s ease-out;
}
.bx-chip:hover { border-color:var(--bx-accent-fg); color:var(--bx-accent-soft); background:rgba(182,189,204,.07); }

/* ---- file row (Mission Control .vrow / .vtype / .vname / .vmeta) ---- */
.bx-file-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:11px 6px; border-bottom:1px solid var(--bx-border); }
.bx-file-type { font-family:var(--bx-font-mono); font-size:7.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--bx-muted); border:1px solid var(--bx-border-strong); border-radius:3px; padding:3px 0; text-align:center; }
.bx-file-name { font-size:12.5px; color:var(--bx-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-file-meta { font-family:var(--bx-font-mono); font-size:9.5px; color:var(--bx-muted); white-space:nowrap; }
.bx-file-acts { display:flex; gap:5px; }

/* ---- drop zone (Mission Control .vault-main.dragging) ---- */
.bx-dropzone { border-radius:var(--bx-radius); transition:background .15s ease-out; }
.bx-dropzone.dragging { outline:1px dashed var(--bx-accent-fg); outline-offset:-3px; background:rgba(182,189,204,.05); }

/* ---- chrome holographic text (Mission Control .foot-brand) ---- */
.bx-chrome {
  font-family:var(--bx-font-mono); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  background-image:var(--bx-chrome-gradient); background-size:250% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:chrome-shine 3.6s linear infinite;
}
@keyframes chrome-shine { from { background-position:0% center; } to { background-position:250% center; } }

/* ---- status badge ---- */
.bx-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--bx-font-mono); font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bx-muted); border:1px solid var(--bx-border-strong); border-radius:999px; padding:4px 11px;
}
.bx-badge::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--bx-muted); flex-shrink:0; }
.bx-badge.live { color:var(--bx-status-live); border-color:rgba(71,209,127,.4); }
.bx-badge.live::before { background:var(--bx-status-live); box-shadow:0 0 6px rgba(71,209,127,.6); }
.bx-badge.danger { color:var(--bx-status-danger); border-color:var(--bx-danger-line); }
.bx-badge.danger::before { background:var(--bx-status-danger); box-shadow:0 0 6px rgba(216,112,95,.6); }
.bx-badge.info { color:var(--bx-status-info); border-color:rgba(74,150,255,.4); }
.bx-badge.info::before { background:var(--bx-status-info); box-shadow:0 0 6px rgba(74,150,255,.55); }
.bx-badge.idle { color:var(--bx-muted); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){ .grain, .bx-chrome { animation:none; } }