/* CRYPTONETRA prototype — local additions only.
   Everything visual comes from the design system's tokens; this file adds the
   blue ENERGY effect colour (used sparingly), the custom cursor and table rhythm. */
:root{
  --energy:#1e5aff;
  --energy-soft:rgba(30,90,255,.16);
  --energy-line:rgba(30,90,255,.55);
}
html{scroll-behavior:smooth}
body{background:var(--color-canvas-night);color:var(--color-on-primary);overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* layout helpers */
.cn-col{width:100%;max-width:var(--reading-column);margin-inline:auto;padding-inline:var(--space-xl)}
.cn-wide{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--space-xxl)}
.cn-section{padding:calc(var(--space-huge) * 2) 0;position:relative}
.cn-stack{display:flex;flex-direction:column;gap:var(--space-xl)}
.cn-row{display:flex;gap:var(--space-xl);align-items:center;flex-wrap:wrap}
.cn-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-huge)}
.cn-hairline{border:0;border-top:var(--hairline) solid var(--color-hairline-on-dark);margin:0}

/* reveal on scroll */
.cn-reveal{opacity:0;transform:translateY(18px);transition:opacity var(--duration-reveal) var(--ease-cinematic),transform var(--duration-reveal) var(--ease-cinematic)}
.cn-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cn-reveal{opacity:1;transform:none}}

/* energy accents — rare by design */
.cn-energy{color:var(--energy)}
.cn-energy-rule{border:0;border-top:var(--hairline) solid var(--energy-line);margin:0}
.cn-badge{display:inline-flex;align-items:center;gap:var(--space-xs);border:var(--hairline) solid var(--color-hairline-on-dark);border-radius:var(--radius-pill);padding:6px var(--space-md);white-space:nowrap}
.cn-badge-synthetic{border-color:var(--color-hairline-on-dark);color:var(--color-on-primary-mute);opacity:.72}

/* tables */
.cn-table{width:100%;border-collapse:collapse;text-align:left}
.cn-table th{padding:var(--space-sm) var(--space-md);border-bottom:var(--hairline) solid var(--color-hairline-on-dark);color:var(--color-on-primary-mute);opacity:.6;white-space:nowrap}
.cn-table td{padding:var(--space-lg) var(--space-md);border-bottom:var(--hairline) solid var(--color-hairline-on-dark);vertical-align:top}
.cn-table tbody tr{transition:background var(--duration-hover) var(--ease-standard);cursor:pointer}
.cn-table tbody tr:hover{background:rgba(255,255,255,.035)}
.cn-table tbody tr[aria-selected="true"]{background:var(--energy-soft)}
.cn-mono{font-variant-numeric:tabular-nums;letter-spacing:.4px}

/* graph */
.cn-node{cursor:pointer}
.cn-node text{pointer-events:none}
.cn-edge{transition:stroke var(--duration-ui) var(--ease-standard),stroke-opacity var(--duration-ui) var(--ease-standard)}
.cn-flow{stroke:var(--energy);stroke-width:1.6}

/* cursor */
.cn-cursor{position:fixed;top:0;left:0;z-index:90;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width var(--duration-ui) var(--ease-cinematic),height var(--duration-ui) var(--ease-cinematic)}
.cn-cursor-ring{width:26px;height:26px;border:1px solid #fff;border-radius:var(--radius-full);display:grid;place-items:center}
.cn-cursor-label{position:fixed;z-index:90;pointer-events:none;transform:translate(18px,-6px);color:#fff;opacity:.85}
@media (hover:none){.cn-cursor,.cn-cursor-label{display:none}}

/* print — the evidence packet & Section 63 BSA certificate */
@media print{
  body{background:#fff!important;color:#000!important}
  .cn-noprint{display:none!important}
  #bsa63-court-certificate{background:#fff!important;color:#000!important;border:2px solid #000!important;box-shadow:none!important;padding:20px!important}
  #bsa63-court-certificate table th,#bsa63-court-certificate table td{border-color:#ccc!important;color:#000!important}
  .cn-print-page{color:#000;background:#fff}
  .cn-print-page .cn-table th,.cn-print-page .cn-table td{border-color:#e0e0e8;color:#000}
}

/* opening sequence */
@keyframes cn-mask { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes cn-sharp { from { opacity: 0; filter: blur(14px); letter-spacing: 14px; }
                      60% { opacity: 1; }
                      to { opacity: 1; filter: blur(0); letter-spacing: 1.6px; } }
@keyframes cn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cn-tele { 0% { opacity: 0; } 12% { opacity: .78; } 78% { opacity: .78; } 100% { opacity: .16; } }
@keyframes cn-tick { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
@keyframes cn-hair { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cn-init-fade {
  0% { opacity: 0; transform: translateY(6px); }
  20% { opacity: 0.92; transform: none; }
  78% { opacity: 0.92; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); pointer-events: none; }
}
.cn-anim { opacity: 0; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .cn-anim { opacity: 1 !important; animation: none !important; filter: none !important; }
  .cn-maskline > span { transform: none !important; animation: none !important; }
}

/* compact header — brand on left end, nav items on right end (different ends) */
.cn-header-compact {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  padding: 16px 36px !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.cn-header-compact a[aria-label] {
  font-size: 13px !important;
  letter-spacing: 1.8px !important;
  padding-right: 0 !important;
  border-right: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.cn-header-compact nav {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin-left: auto !important;
}
.cn-header-compact button {
  margin-left: auto !important;
}
.cn-header-compact nav a {
  font-size: 11px !important;
  letter-spacing: 0.85px !important;
  min-height: 24px !important;
  padding: 2px 4px !important;
  opacity: 0.72 !important;
}
.cn-header-compact nav a:hover {
  opacity: 1 !important;
  color: #fff !important;
}
.cn-header-compact nav a[aria-current="page"] {
  opacity: 1 !important;
  color: #fff !important;
  border-bottom: 1px solid var(--energy) !important;
}

/* =========================================
   Mobile Responsiveness & iOS Fixes
   ========================================= */
@media (max-width: 768px) {
  /* Fix typography scaling */
  .type-display-lg {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  .type-display-md {
    font-size: 24px !important;
  }
  
  /* Fix layout paddings */
  .cn-col, .cn-wide {
    padding-inline: var(--space-md) !important;
  }
  .cn-section {
    padding: var(--space-xl) 0 !important;
  }
  
  /* Stack grid layouts */
  .cn-grid-2 {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }
  
  /* Wrap or scroll headers */
  .cn-header-compact {
    padding: 16px var(--space-md) !important;
    flex-wrap: wrap !important;
    gap: var(--space-sm) !important;
  }
  .cn-header-compact nav {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  
  /* Make tables horizontally scrollable */
  .cn-table-wrapper, 
  div[style*="border: 1px solid rgba(255, 255, 255, 0.1)"] {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--radius-lg);
  }
  
  /* Hide custom cursor on mobile */
  .cn-cursor, .cn-cursor-label {
    display: none !important;
  }
}