/* ============================================================
   base.css — Reset, Foundation, Typography, Accessibility
   Premium AI Intelligence Platform
   ============================================================ */

/* ────────── MODERN RESET ────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* CRITICAL: Preserve JavaScript hide/show functionality */
[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--bg-base);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg-base);
}

/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-gold);
}

body {
  min-height: 100%;
  position: relative;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}

/* ────────── AMBIENT LIGHTING ──────────
   This used to be a three-colour bloom — gold at the top, BLUE in the
   bottom-left corner and GREEN in the bottom-right — painted across the
   whole viewport. That is what made the app look like it had "half black
   and some other shade": the background was never one colour, and the
   tint shifted as you scrolled between sections, so cards read as boxes
   floating on uneven ground.

   Inside the app the background is now a single, flat obsidian black.
   Nothing competes with the data, which is the thing people came to read.

   The bloom survives on the SIGN-IN SCREEN only, reduced to a single
   gold glow. That screen has no data to disturb, it is the first
   impression, and it is the surface the glass card is layered over —
   glass needs something behind it or it is just a grey panel.

   The sign-in bloom itself is defined in login.css, which owns that
   screen and already had its own #loginView::before. Deliberately not
   duplicated here: login.css loads later, so a copy in this file would
   be dead code that looks live. */

@keyframes ambientPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* ────────── SELECTION ────────── */
::selection {
  background: var(--gold);
  color: var(--bg-base);
  text-shadow: none;
}

::-moz-selection {
  background: var(--gold);
  color: var(--bg-base);
}

/* ────────── TYPOGRAPHY ────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}

h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
}

h2 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
}

h3 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
}

p {
  margin: 0;
  line-height: var(--lh-relaxed);
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

a:hover {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

b, strong {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

/* Monospaced numbers for data */
.mono, code, kbd, 
[class*="num"],
[class*="count"],
[class*="stat"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

code {
  background: var(--bg-surface);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: 0.9em;
}

/* ────────── ACCESSIBILITY ────────── */
/* Focus styles for keyboard navigation */
:where(button, a, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Make data tables and results selectable */
.chip, .item, .stat, .drawpanel, table, pre, .selectable {
  -webkit-user-select: text;
  user-select: text;
}

/* ────────── UTILITY CLASSES ────────── */
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.dim {
  color: var(--text-secondary);
}

.muted {
  color: var(--text-tertiary);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

.text-center {
  text-align: center;
}

/* ────────── LOADING PRIMITIVES ────────── */
/* Premium skeleton loaders */
.skel {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--skeleton-from) 25%,
    var(--skeleton-to) 50%,
    var(--skeleton-from) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

.skel + .skel {
  margin-top: var(--s2);
}

.skel.line {
  height: 14px;
  border-radius: var(--r-xs);
}

.skel.line.short {
  width: 40%;
}

.skel.line.mid {
  width: 65%;
}

.skel.line.long {
  width: 85%;
}

.skel.title {
  height: 24px;
  width: 50%;
  margin-bottom: var(--s3);
  border-radius: var(--r-sm);
}

.skel.block {
  height: 80px;
  border-radius: var(--r-md);
}

.skel.chip {
  height: 48px;
  border-radius: var(--r-sm);
}

.skel.card {
  height: 200px;
  border-radius: var(--r-lg);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Premium spinner for buttons */
.spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  vertical-align: middle;
  animation: rotate 0.8s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Loading pulse for live elements */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ────────── ICONS ────────── */
.ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.ico.sm {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

.ico.lg {
  width: 32px;
  height: 32px;
  stroke-width: 1.75;
}

.ico.xl {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
}

/* ────────── MOTION RESPECT ────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  #loginView::before {
    animation: none;
  }
}

/* ────────── HIGH CONTRAST MODE ────────── */
@media (prefers-contrast: more) {
  :root {
    --text-secondary: #D4D4D8;
    --text-tertiary: #A1A1AA;
    --border-default: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.25);
  }
}

/* ────────── PRINT STYLES ────────── */
@media print {
  #loginView::before {
    display: none;
  }
  
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* App-like behaviour: no pinch-zoom, no long-press text callout, no
   double-tap zoom, no overscroll bounce. The in-app A/A+/A++ button
   still works — it scales font tokens, not the viewport. Inputs remain
   selectable so people can copy/paste numbers. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, .cr-num, .tm-num, [data-selectable] {
  -webkit-user-select: text; user-select: text;
}

/* ============================================================
   NATIVE-FEEL LOCKS — make the TWA stop behaving like a web page,
   WITHOUT touching scroll. (Scroll setup is the authoritative block
   at the end of this file — do not add overflow/touch-action here.)
   ============================================================ */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;      /* no long-press image/link menu */
  -webkit-tap-highlight-color: transparent;
}
/* but DO allow selecting real content the user may want to copy */
input, textarea, .selectable, .cr-num, .tm-num, output, code {
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================================
   SCROLL — simplest correct setup: let the whole document scroll
   naturally like a normal web page. Do NOT put overflow-y:auto on
   BOTH html and body — two scroll containers confuse mobile Chrome
   and break touch-scroll (the long-standing scroll bug). Only the
   document (html) scrolls; body just flows.
   ============================================================ */
html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;   /* blocks pull-to-refresh; does NOT block scroll */
  -webkit-overflow-scrolling: touch;
}
body {
  height: auto;
  min-height: 100%;
  overflow: visible;         /* NOT a scroll container — html scrolls */
  position: static;          /* position:relative on body can pin scroll on some WebViews */
  touch-action: auto;        /* let the browser handle scroll gestures natively */
}
#appView { min-height: 100%; height: auto; overflow: visible; }
main { overflow: visible; height: auto; }