/* ============================================================
   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); }

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