/* ============================================================================
   SYNCHRON — CYBERPUNK LAYER
   BORG's signature treatment (palette values live in css/style.css :root) applied
   to Synchron's existing surfaces. Colour, texture and shape ONLY — no layout
   geometry is changed, so the verified mobile band, the pinned modal action bars
   and the measured hit targets keep their numbers.

   The MAP keeps a neutral palette on purpose (owner's choice): no neon tint and no
   scanline over the imagery. The CRT texture lives on the chrome instead.

   REVERT: delete the <link ... css/cyberpunk.css> line in index.html. Nothing else
   depends on this file.
   ============================================================================ */

/* ---- screen texture: grid + glow behind the chrome ---- */
body {
  background-image:
    linear-gradient(rgba(0, 217, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, .045) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(0, 217, 255, .10) 0%, transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(0, 255, 163, .05) 0%, transparent 50%);
  background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
/* CRT scanlines on the chrome surfaces; #map is deliberately excluded */
.panel, .modal-content, .auth-card, .more-menu {
  background-image: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, .10) 0px, rgba(0, 0, 0, .10) 1px, transparent 1px, transparent 4px);
}

/* ---- header: gradient shell + gradient-clipped wordmark ---- */
.app-header {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(0, 217, 255, .10);
}
.brand { color: var(--accent); filter: drop-shadow(0 0 4px rgba(0, 217, 255, .55)); }
.brand-name {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 4px;
  background-image:
    repeating-linear-gradient(0deg, rgba(4, 8, 16, .3) 0px, rgba(4, 8, 16, .3) 1.5px, transparent 1.5px, transparent 4px),
    linear-gradient(180deg, #7df9ff 0%, var(--accent) 45%, var(--ok) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(0, 217, 255, .6)) drop-shadow(0 0 10px rgba(0, 255, 163, .3));
}

/* ---- terminal typography: the look comes from CASE + SPACING, not a mono font ---- */
.tab-btn, .btn, .field > span, h3.sect, .chip, .mnav-btn, .sev span,
.modal-head h2, .auth-sub, .pick-bar span, .more-menu button {
  text-transform: uppercase; letter-spacing: 1.5px;
}
h3.sect { letter-spacing: 3px; color: var(--accent); border-bottom: 1px solid var(--line); }
.modal-head h2 { letter-spacing: 2px; text-shadow: 0 0 8px rgba(0, 217, 255, .25); }
.field > span { letter-spacing: 1px; font-weight: 600; }

/* ---- buttons ---- */
.btn { border-radius: var(--btn-radius); border: 1px solid var(--line); background: transparent; color: var(--text); transition: var(--transition); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--dim-2));
  border-color: var(--accent); color: var(--on-primary); font-weight: 800;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--accent), var(--ok)); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-secondary:hover { background: var(--surface-focus); box-shadow: var(--glow-cyan); color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--dim); }
.btn-ghost:hover { background: var(--surface-1); color: var(--accent); text-shadow: 0 0 8px rgba(0, 217, 255, .5); }
.btn-danger { background: transparent; color: var(--danger-text); border: 1px solid currentColor; }
.btn-danger:hover { background: rgba(157, 117, 117, .18); color: var(--danger-text); }
.icon-btn { border: 1px solid var(--line); background: rgba(100, 108, 125, .05); color: var(--dim); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-cyan); }

/* ---- cards: one surface, 3px left accent encodes state ---- */
.card { background: var(--panel-3); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 0; box-shadow: none; }
.card:hover { box-shadow: var(--glow-slate); }
.card.sel { border-left-color: var(--ok); box-shadow: var(--glow-green); }
.search-hit, .study, .finding, .setting, .empty-state { border-radius: 0; }
.search-hit { background: var(--panel-3); border: 1px solid var(--line-2); }
.radio-row:hover, .search-hit:hover { background: var(--surface-focus); }
.setting { background: var(--surface-1); border: 1px solid var(--line); }
.calc, .chart { background: var(--surface-1); border: 1px solid var(--line); border-radius: 0; }
.calc b { color: var(--accent); }

/* ---- inputs: square, surface fill, cyan focus glow ---- */
.field input[type=text], .field input[type=number], .field input[type=url],
.field input[type=email], .field input[type=password], .field select, .field textarea,
.user-reset input {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 0;
  color: var(--text); transition: var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus, .user-reset input:focus {
  outline: none; border-color: var(--accent); background: var(--surface-focus);
  box-shadow: var(--glow-cyan), inset 0 0 12px rgba(0, 217, 255, .08);
}
.field select option { background: var(--bg-2); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--dim-2); }

/* ---- range sliders (BORG ships none; built in its language) ---- */
.field input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; accent-color: var(--accent); }
.field input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--line); }
.field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px;
  background: var(--accent); border: 1px solid var(--bg); box-shadow: var(--glow-cyan); cursor: pointer;
}
.field input[type=range]::-moz-range-track { height: 4px; background: var(--line); }
.field input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border: 1px solid var(--bg); box-shadow: var(--glow-cyan); }
.check input { accent-color: var(--accent); }

/* ---- chips / badges ---- */
.chip {
  background: rgba(0, 217, 255, .08); border: 1px solid rgba(0, 217, 255, .35);
  color: var(--accent); border-radius: 0; font-weight: 700; letter-spacing: 1px;
}
.tag { border-radius: 0; }
.tag-ok { color: var(--ok); border-color: rgba(0, 255, 163, .45); }

/* ---- tabs ---- */
.tab-btn { color: var(--dim); border-radius: 0; }
.tab-btn:hover { color: var(--accent); text-shadow: 0 0 8px rgba(0, 217, 255, .5); }
.tab-btn.active { background: transparent; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent), 0 0 14px rgba(0, 217, 255, .25); }
.seg button { border-radius: 0; }
.seg button.active { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- bottom nav ---- */
.mnav { background: rgba(10, 10, 20, .78); backdrop-filter: blur(4px); border-top: 1px solid var(--line); box-shadow: 0 -4px 24px rgba(0, 217, 255, .10); }
.mnav-btn { letter-spacing: 1px; }
.mnav-btn.active { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent), 0 0 14px rgba(0, 217, 255, .25); }

/* ---- panel, modals, toasts, menus ---- */
.panel { background: rgba(10, 10, 20, .93); backdrop-filter: blur(6px); }
.panel-head { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.modal { background-color: rgba(2, 6, 12, .82); }
.modal-content {
  background: linear-gradient(135deg, var(--bg-2), var(--panel-2));
  border: 1px solid var(--line-2); border-top: 2px solid var(--accent); border-radius: 0;
  box-shadow: var(--shadow-2), var(--glow-cyan);
}
.modal-head { background: var(--bg-2); border-bottom: 1px solid var(--line); border-radius: 0; }
.modal-actions { background: linear-gradient(180deg, rgba(10, 10, 20, 0) 0%, var(--bg-2) 40%); }
.toast {
  background: rgba(16, 14, 32, .97); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0; box-shadow: var(--shadow-2), var(--glow-cyan); letter-spacing: .5px;
}
.toast.ok { border-left-color: var(--ok); box-shadow: var(--shadow-2), var(--glow-green); }
.toast.warn { border-left-color: var(--warn); box-shadow: var(--shadow-2), var(--glow-amber); }
.toast.error { border-left-color: var(--bad); box-shadow: 0 0 22px rgba(255, 82, 82, .35); }
.more-menu { background: rgba(16, 14, 32, .97); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow-2), var(--glow-cyan); }
.more-menu button:hover { background: var(--surface-focus); color: var(--accent); }

/* ---- map furniture (chrome only; imagery untouched) ---- */
.map-readout, .sheet-toggle, .pick-bar { background: rgba(10, 10, 20, .88); border: 1px solid var(--line); border-radius: 0; backdrop-filter: blur(4px); }
.pick-bar { border-color: var(--accent); box-shadow: var(--glow-cyan); }
.map-readout span:last-child { color: var(--accent); }
.pin-text { background: rgba(10, 10, 20, .9); border: 1px solid var(--line-2); border-left: 2px solid var(--c, var(--accent)); border-radius: 0; }
.pin-dot { box-shadow: 0 0 0 3px rgba(0, 217, 255, .25), 0 0 12px var(--c, var(--accent)); }
.maplibregl-ctrl-group { background: rgba(10, 10, 20, .92) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.maplibregl-ctrl-attrib { background: rgba(5, 5, 12, .72) !important; }

/* ---- findings severity ---- */
.finding.sev-critical { border-left-color: var(--bad); }
.finding.sev-high { border-left-color: #ff6600; }
.finding.sev-medium { border-left-color: var(--warn); }
.finding.sev-low { border-left-color: var(--ok); }

/* ---- login: cut corner, glow, glitch title ---- */
.auth-gate { background: linear-gradient(135deg, #05050c 0%, var(--bg-2) 45%, var(--panel-2) 100%); }
.auth-card {
  background: linear-gradient(135deg, var(--bg-2), var(--panel-2));
  border: 1px solid var(--line-2); border-top: 2px solid var(--accent); border-radius: 0;
  box-shadow: var(--shadow-2), var(--glow-cyan), inset 0 1px 0 rgba(255, 255, 255, .06);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  backdrop-filter: blur(10px);
}
.auth-title {
  position: relative; font-family: var(--font-display); font-weight: 900; font-size: 26px;
  letter-spacing: 6px; text-indent: 6px; margin: 12px 0 4px;
  background-image:
    repeating-linear-gradient(0deg, rgba(4, 8, 16, .3) 0px, rgba(4, 8, 16, .3) 1.5px, transparent 1.5px, transparent 4px),
    linear-gradient(180deg, #7df9ff 0%, var(--accent) 45%, var(--ok) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px rgba(0, 217, 255, .6)) drop-shadow(0 0 10px rgba(0, 255, 163, .3));
  animation: synchronFlicker 6s ease-in-out infinite, synchronTear 4.5s steps(1, end) infinite;
}
.auth-title::before, .auth-title::after {
  content: attr(data-text); position: absolute; inset: 0; text-indent: 6px;
  -webkit-text-fill-color: currentColor; opacity: 0; pointer-events: none;
}
.auth-title::before { color: var(--ok); animation: synchronGlitchA 2s linear infinite; }
.auth-title::after { color: var(--accent); animation: synchronGlitchB 2.8s linear infinite; }
.auth-sub { letter-spacing: 4px; color: var(--dim); position: relative; padding: 0 34px; display: inline-block; }
.auth-sub::before, .auth-sub::after {
  content: ''; position: absolute; top: 50%; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.auth-sub::before { left: 0; }
.auth-sub::after { right: 0; transform: scaleX(-1); }
.auth-foot { animation: synchronHintGlow 3s ease-in-out infinite; }
.auth-error { background: rgba(255, 82, 82, .10); border: 1px solid rgba(255, 82, 82, .42); color: #ffc9c9; border-radius: 0; }

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---- motion ---- */
@keyframes synchronTear {
  0%, 88%, 100% { clip-path: none; transform: none; text-shadow: none; }
  89% { clip-path: inset(12% 0 58% 0); transform: translate(-2px, 0); text-shadow: -3px 0 var(--ok), 3px 0 var(--accent); }
  91% { clip-path: inset(52% 0 20% 0); transform: translate(2px, 1px); text-shadow: 3px 0 var(--accent), -3px 0 var(--ok); }
  93% { clip-path: inset(30% 0 44% 0); transform: translate(-2px, -1px); text-shadow: -2px 0 var(--ok), 2px 0 var(--accent); }
  95% { clip-path: inset(66% 0 8% 0); transform: translate(2px, 0); text-shadow: 2px 0 var(--accent), -2px 0 var(--ok); }
}
@keyframes synchronGlitchA {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: none; }
  92% { opacity: .8; transform: translate(-5px, 0); clip-path: inset(8% 0 62% 0); }
  94% { opacity: .55; transform: translate(4px, 1px); clip-path: inset(58% 0 22% 0); }
  96% { opacity: 0; }
}
@keyframes synchronGlitchB {
  0%, 91%, 100% { opacity: 0; transform: none; clip-path: none; }
  93% { opacity: .7; transform: translate(5px, 0); clip-path: inset(24% 0 44% 0); }
  95% { opacity: .45; transform: translate(-4px, -1px); clip-path: inset(70% 0 6% 0); }
  97% { opacity: 0; }
}
@keyframes synchronFlicker { 0%, 90%, 100% { opacity: 1; } 92% { opacity: .84; } 94% { opacity: .94; } 96% { opacity: .88; } }
@keyframes synchronHintGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; text-shadow: 0 0 8px rgba(0, 217, 255, .45); } }

@media (prefers-reduced-motion: reduce) {
  .auth-title, .auth-title::before, .auth-title::after, .auth-foot,
  .sync-chip.syncing .sync-dot, .boot-mark { animation: none !important; }
  * { transition: none !important; }
}

/* ---- breakpoints: keep the square geometry consistent ---- */
@media (min-width: 700px) { .modal-content { border-radius: 0; } }
@media (min-width: 1024px) { .panel { background: rgba(10, 10, 20, .95); } }