/* JINK v4.1 shared page styles — reuses tokens + helpers from index.html */

@font-face {
  font-family: 'Zpix';
  src: url('/fonts/zpix.woff2') format('woff2'),
       url('/fonts/zpix.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0A0A0A; color: #FFFFFF; font-family: 'Inter', system-ui, sans-serif; overflow-x: auto; }
::selection { background: #39FF14; color: #0A0A0E; }
canvas { display: block; }

.stage { position: relative; width: 1440px; margin: 0 auto; background: #0A0A0A; overflow: hidden; }

:root {
  --pixel-green: #39FF14;
  --pixel-blue:  #0078D7;
  --pixel-red:   #FF2E2E;
  --ink-deep:    #0A0A0A;
  --ink-dark:    #0F0F0F;
  --ink-chip:    #0E0E12;
  --ink-elev:    #1A1A1A;
  --ink-rule:    #1F1F26;
  --ink-soft:    #333333;
  --ink-muted:   #999999;
  --ink-faint:   #666666;
  --paper:       #FFFFFF;
  --paper-warm:  #FAFAF8;
  --silver:      #C0C0C8;
}

.bg-layer { position: absolute; left: 0; top: 0; width: 1440px; pointer-events: none; }

.pixel-pill {
  position: relative;
  background: var(--pp-fill, #39FF14);
  box-shadow:
    inset 0 0 0 var(--pp-px, 6px) var(--pp-border, #0A0A0E);
  clip-path: polygon(
    0 var(--pp-px,6px), var(--pp-px,6px) var(--pp-px,6px), var(--pp-px,6px) 0,
    calc(100% - var(--pp-px,6px)) 0, calc(100% - var(--pp-px,6px)) var(--pp-px,6px), 100% var(--pp-px,6px),
    100% calc(100% - var(--pp-px,6px)), calc(100% - var(--pp-px,6px)) calc(100% - var(--pp-px,6px)),
    calc(100% - var(--pp-px,6px)) 100%, var(--pp-px,6px) 100%,
    var(--pp-px,6px) calc(100% - var(--pp-px,6px)), 0 calc(100% - var(--pp-px,6px))
  );
  transition: filter 150ms ease, transform 150ms ease;
}
.pixel-pill:hover { filter: brightness(1.08); transform: scale(1.02); }
.pixel-pill:active { transform: scale(0.98); }
.pixel-pill[aria-busy="true"], .pixel-pill[disabled] { opacity: 0.6; cursor: wait; pointer-events: none; }

/* Auth form inputs — match the dark-pixel aesthetic */
.auth-input {
  width: 100%;
  background: #0A0A0E;
  border: 1px solid #262630;
  padding: 12px 14px;
  font-family: 'Zpix', monospace;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.auth-input::placeholder { color: #5A5A62; }
.auth-input:focus { border-color: #39FF14; box-shadow: 0 0 0 1px #39FF14; }
.auth-input.error { border-color: #FF2E2E; box-shadow: 0 0 0 1px #FF2E2E; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 4px solid currentColor;
  border-left-color: transparent;
  border-radius: 0;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}

/* Form messages */
.auth-msg {
  font-family: 'Zpix', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 10px 12px;
  border: 1px solid currentColor;
  background: #0A0A0E;
  word-break: break-word;
}
.auth-msg.hidden { display: none; }
.auth-msg.msg-error { color: #FF2E2E; }
.auth-msg.msg-ok { color: #39FF14; }
.auth-msg.fade-out { opacity: 0; transition: opacity 600ms ease; }

/* Field-level error text */
.auth-field-error {
  font-family: 'Zpix', monospace;
  font-size: 11px;
  color: #FF2E2E;
  letter-spacing: 1px;
  margin-top: 4px;
  display: none;
}
.auth-field-error.visible { display: block; }

/* Anchor hover (ghost link) */
.auth-link { transition: color 120ms ease, text-shadow 120ms ease; }
.auth-link:hover { color: #FFFFFF; text-shadow: 2px 0 0 #39FF14; }

.mq { display: flex; gap: 24px; white-space: nowrap; width: max-content; align-items: center; animation: mq-scroll 60s linear infinite; }
.mq-slow { animation-duration: 90s; }
@keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.vox-tape { background-image: repeating-linear-gradient(-45deg, #39FF14 0, #39FF14 4px, transparent 4px, transparent 8px); }
.scanlines { background-image: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.5) 2px, rgba(0,0,0,0.5) 3px); opacity: 0.04; }

.abs { position: absolute; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Shared NAV — height 120, fill #000, padding [24,48], between bento pills */
.v41-nav {
  position: absolute; left:0; top:0; width:1440px; height:120px;
  background:#000; padding:24px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; z-index:30;
}

/* === Shop / Product / Cart wiring === */

/* Toast (top-right slide-in) */
@keyframes jink-toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes jink-toast-out { to { transform: translateX(120%); opacity: 0; } }
.toast {
  position: fixed; top: 20px; right: 20px;
  background: #0E0E12; border: 1px solid #39FF14;
  padding: 12px 16px;
  font-family: 'Zpix', monospace; font-size: 13px;
  color: #39FF14; letter-spacing: 1px;
  z-index: 1000;
  animation: jink-toast-in 200ms ease;
  box-shadow: 4px 4px 0 0 #0078D7;
  max-width: 360px;
  pointer-events: auto;
}
.toast.toast-error { border-color: #FF2E2E; color: #FF2E2E; box-shadow: 4px 4px 0 0 #FF2E2E40; }
.toast.toast-out { animation: jink-toast-out 240ms ease forwards; }

/* Skeleton shimmer */
@keyframes jink-shimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } }
.skeleton {
  background: linear-gradient(90deg, #1A1A1A 0%, #2A2A2A 40%, #1A1A1A 80%);
  background-size: 800px 100%;
  animation: jink-shimmer 1.4s linear infinite;
}

/* Product card image hover swap */
.pc-img { position: relative; overflow: hidden; }
.pc-img > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 280ms ease; }
.pc-img > img.pc-img-alt { position: absolute; inset: 0; opacity: 0; }
.pc-img:hover > img.pc-img-alt { opacity: 1; }

/* Container fade-in */
.api-fade { opacity: 0; transition: opacity 200ms ease; }
.api-fade.is-loaded { opacity: 1; }

/* Cart line + qty stepper */
.qty-stepper { display: flex; align-items: center; background: #0A0A0E; border: 2px solid #1F1F26; }
.qty-stepper button { width: 36px; height: 36px; background: #1F1F26; color: #FFFFFF; border: 0; font-family: 'Zpix', monospace; font-size: 18px; }
.qty-stepper button:hover { background: #2A2A30; }
.qty-stepper input { width: 48px; height: 36px; background: #0A0A0E; color: #FFF; border: 0; text-align: center; font-family: 'Zpix', monospace; font-size: 16px; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* === SHARED INTERACTIVITY (added by Group D) === */

/* Hover states */
.pixel-pill { transition: filter 150ms ease, transform 150ms ease; }
.pixel-pill:hover:not(:disabled):not([aria-busy="true"]) { filter: brightness(1.08); transform: scale(1.02); }
.pixel-pill:active:not(:disabled) { transform: scale(0.98); }
.pixel-pill:disabled, .pixel-pill[aria-busy="true"] { opacity: 0.55; cursor: wait; pointer-events: none; }

/* Spinner override (larger context) */
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast host container (right-side stack, used by window.toast) */
@keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-host { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-host > .toast {
  position: static;
  background: #0E0E12; border: 1px solid #39FF14;
  padding: 12px 16px;
  font-family: 'Zpix', monospace; font-size: 13px;
  color: #39FF14; letter-spacing: 1px;
  animation: toast-in 200ms ease-out;
  min-width: 200px;
  pointer-events: auto;
}
.toast-host > .toast.error { border-color: #FF2E2E; color: #FF2E2E; }
.toast-host > .toast.fade-out { transition: opacity 300ms; opacity: 0; }

/* Skeleton — explicit class for blog/list skeletons */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skel-block { background: linear-gradient(90deg, #1F1F26 0%, #2A2A33 50%, #1F1F26 100%); background-size: 400px 100%; animation: shimmer 1.4s linear infinite; border-radius: 2px; }

/* Loading overlay */
.loading-overlay { position: fixed; inset: 0; background: rgba(10,10,14,0.85); display: flex; align-items: center; justify-content: center; z-index: 9998; backdrop-filter: blur(2px); }
.loading-overlay .spinner { width: 36px; height: 36px; border-width: 3px; color: #39FF14; }

/* Form inputs (page-wide) */
input:focus, textarea:focus, select:focus { outline: 2px solid #39FF14; outline-offset: 2px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #FF2E2E !important; }
.field-error { font-family: 'Zpix', monospace; font-size: 11px; color: #FF2E2E; letter-spacing: 1px; margin-top: 4px; }
.field-ok { color: #39FF14; }

/* Card hover (used by product/blog cards) */
.card-hover { transition: transform 280ms ease, box-shadow 280ms ease; }
.card-hover:hover { transform: translateY(-2px); }

/* Image swap (primary <-> secondary on hover) */
.img-swap { position: relative; }
.img-swap > .img-primary, .img-swap > .img-secondary { position: absolute; inset: 0; transition: opacity 280ms ease; }
.img-swap > .img-secondary { opacity: 0; }
.img-swap:hover > .img-secondary { opacity: 1; }

/* Nav user-dropdown items */
.nav-dd-item { transition: background 120ms ease, color 120ms ease; }
.nav-dd-item:hover { background: #1F1F26; color: #39FF14 !important; }

/* Modal */
.jk-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9990; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.jk-modal { background: #0E0E12; border: 2px solid #39FF14; box-shadow: 8px 8px 0 0 #0078D7; padding: 28px; max-width: 560px; width: 92%; max-height: 80vh; overflow:auto; }
.jk-modal h3 { margin: 0 0 14px; font-family: 'Zpix', monospace; color: #FFF; font-size: 22px; letter-spacing: 1px; }
.jk-modal .close-btn { position: absolute; top: 14px; right: 14px; background: transparent; color: #FFF; border: 0; font-family: 'Zpix', monospace; font-size: 22px; cursor: pointer; }

/* Accordion (FAQ) */
.faq-hidden { display: none !important; }
.faq-highlight { background: #39FF1422; }

/* Accessibility helpers (used across pages) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
button[aria-disabled="true"], a[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed !important; pointer-events: none; }

/* ============================================================
   === RESPONSIVE — viewport-scale the 1440px stage ============
   ============================================================
   The whole site is designed at a fixed 1440px width with absolute
   positioning. Below 1440px we proportionally scale the .stage via
   CSS transform so the desktop pixel-perfect layout survives intact
   on tablet + phone widths. No layout rewrite needed.

   For the body height to track the scaled stage we expose --stage-h
   on each page's <div class="stage" style="--stage-h: 5512;">.
   The fallback (1080) is used only if a page forgets to set it.
   ------------------------------------------------------------ */

@media (max-width: 1439px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .stage {
    transform: scale(calc(100vw / 1440));
    transform-origin: top left;
  }
  /* Stage's layout box is still 1440 × --stage-h; visual size is
     scaled. Keep body tall enough to contain the scaled visual. */
  body {
    min-height: calc(var(--stage-h, 1080) * 1px * (100vw / 1440));
  }
}

/* Tablet (≤1024) — drop the time pill so the bento links + cart + auth stay readable. */
@media (max-width: 1024px) {
  .nav-time-pill { display: none !important; }
}

/* Mobile — hide GPU-heavy decorative sketches to save battery + paint. */
@media (max-width: 768px) {
  canvas[data-sketch="lightning-cracks"],
  canvas[data-sketch="lightning-fractal"],
  canvas[data-sketch="lightning-tendrils"],
  div[data-sketch="lightning-cracks"],
  div[data-sketch="lightning-fractal"],
  div[data-sketch="lightning-tendrils"] {
    display: none !important;
  }
  canvas[data-sketch="ic-circuit"], div[data-sketch="ic-circuit"],
  canvas[data-sketch="speed-blur"], div[data-sketch="speed-blur"] {
    opacity: 0.4 !important;
  }
  /* Hide time pill on phones — too tiny + low value (also covered by 1024 rule above) */
  .nav-time-pill { display: none !important; }
}

/* Small phone — ensure body covers viewport even if --stage-h is missing. */
@media (max-width: 414px) {
  body { min-height: 100dvh; }
}