/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@16.2.10_@babel+core@7.29.0_supports-color@7.2.0__@playwright+test@1.60.0_react-dom_ddf9a9e9b7422234bbb3512f8895cc65/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.pnpm/next@16.2.10_@babel+core@7.29.0_supports-color@7.2.0__@playwright+test@1.60.0_react-dom_ddf9a9e9b7422234bbb3512f8895cc65/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Global stylesheet: the single-sourced design-token layer (`:root` +
   `body.theme-light`) and the semantic `.wp-*` class layer that consumes it.
   No CSS framework — hand-authored tokens + a small class set; component-level
   styling stays in JS/primitives. Keep tokens + classes canonical here. */

:root {
  /* ---- Color tokens ----
     Role-based, one canonical name per role. Consumed everywhere via
     `var(--token)` (in JS style objects) or the `.wp-*` classes; never a raw
     hex/rgba outside this block (+ the theme-light override below). Renamed
     from the former `--color-*` synonym set (which had undefined duplicates)
     in the FE-standardization program — see
     claude-project-reports/world-port-fe-standardization-audit.md. */
  /* surfaces */
  --bg: #0b0d10; /* page background */
  --surface: #14181d; /* panels, cards, inputs (raised surface) */
  --border: #2a3038;
  /* text */
  --fg: #e8eaed;
  --fg-muted: #8b94a3;
  /* brand */
  --accent: #4f9cf9;
  --on-accent: #ffffff; /* text/icon on an accent fill */
  /* status tones — four DISTINCT roles (NOT synonyms). Consumed via
     `statusColor(tone)` in lib/constants/status.ts; light overrides desaturate
     for a cream background. */
  --success: #4caf50; /* green  */
  --warning: #f5c842; /* amber  */
  --alert: #ff8a4a; /* orange */
  --danger: #ef5050; /* red    */
  /* Tone tints — a tone at low alpha; the single source for every tinted
     background (the `Badge` chip, the "selected option" highlight, warning
     callouts). Explicit rgba, NOT `color-mix` (unavailable on older mobile
     WebKit); tracked by hand per theme in the override below. */
  --accent-tint: rgba(79, 156, 249, 0.16);
  --success-tint: rgba(76, 175, 80, 0.16);
  --warning-tint: rgba(245, 200, 66, 0.16);
  --alert-tint: rgba(255, 138, 74, 0.16);
  --danger-tint: rgba(239, 80, 80, 0.16);
  /* chrome over the WebGL map — near-opaque ON PURPOSE: a translucent bg that
     relied on `backdrop-filter: blur()` pegged the iOS GPU / overheated Safari
     (blur removed — see BottomNav/Pill). A hair of translucency for depth. */
  --chrome: rgba(20, 24, 29, 0.96);
  --nav: rgba(13, 17, 23, 0.97);
  /* dim scrim behind modals/dialogs — one shared value for every overlay
     shell; a solid dim, never a backdrop-filter blur (GPU rule). */
  --scrim: rgba(0, 0, 0, 0.55);
  /* elevation shadows — THE overlay drop-shadow scale, keyed on how high the
     surface floats: sm = attached/transient overlays (dropdowns, pills, toasts,
     banners); md = floating panels/cards (callout, settings popover); lg = full
     modal dialogs. Black-alpha + theme-independent (matches prior behavior), so
     defined only here. Every overlay's box-shadow uses one of these — never a
     raw rgba() drop (guarded by check-no-adhoc-styles.sh). */
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  /* letterbox / media backdrop behind contained media (the image-crop stage) —
     pinned dark in BOTH themes (like `.map-void`) so it delimits the media and
     a light/transparent image keeps contrast; the light-theme cream `--bg`
     would bleed into the surface. Theme-independent, so defined only here. */
  --letterbox: #000;
  /* ---- Type scale ----
     A finite type ladder so font sizes snap to shared rungs instead of the
     ~12 ad-hoc values that drifted across components (the "different fonts"
     class of bug). Rungs are anchored on the codebase's actual popular sizes
     (0.85rem is the dominant body size) so migration shifts pixels minimally.
     Theme-independent (sizes don't change light/dark), so defined only here.
     Use via `fontSize: "var(--text-sm)"` — never a raw rem literal for TEXT
     (enforced by check-no-adhoc-styles.sh). A deliberate NON-text glyph/icon
     size stays a raw rem but must carry a `glyph`-marked comment on its line. */
  --text-xs: 0.7rem;
  --text-sm: 0.8rem;
  --text-base: 0.85rem;
  --text-md: 0.9rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  /* Display rungs — hero headings / big stat numbers above the UI-text scale. */
  --text-3xl: 1.75rem;
  --text-4xl: 2.25rem;
  --text-5xl: 2.5rem;
  /* ---- Spacing scale ----
     Shared gap/padding/margin rhythm, anchored on the popular values so the
     fold is gentle (≤0.1rem snap). Use via `gap: "var(--space-3)"` /
     `padding: "var(--space-6)"` — never a raw rem literal for gap/padding/margin
     (enforced by check-no-adhoc-styles.sh; a deliberate off-scale value carries
     a `raw-rem` marker comment). Positioning (top/left/…) + dimensions stay raw. */
  --space-05: 0.15rem;
  --space-1: 0.25rem;
  --space-2: 0.4rem;
  --space-3: 0.5rem;
  --space-4: 0.6rem;
  --space-5: 0.75rem;
  --space-6: 1rem;
  --space-7: 1.25rem;
  --space-8: 1.5rem;
  --space-10: 2rem;
  /* Font-free (Local-First B.9): NO web-font download — the UI renders in the
     platform's own system fonts, so there are zero font bytes on the cold-start
     / offline path and no FOUT/FOIT. `--font-sans` / `--font-mono` are the two
     typography seams every surface reads (never an inline stack). `system-ui`
     resolves to SF Pro / Segoe UI / Roboto per platform; the mono stack to
     SF Mono / Consolas / Roboto Mono. The body's `font-variant-numeric:
     slashed-zero` (below) still fires where the platform font supports it and
     degrades to a plain (still oval, O-distinct) zero where it doesn't. */
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    "Roboto Mono", monospace;
  font-family: var(--font-sans);
}

/* Light-theme overrides applied via body.theme-light by useMapPrefs. */
body.theme-light {
  --bg: #faf8f3;
  --surface: #ffffff;
  --border: #d3d8df;
  --fg: #1a1f2e;
  --fg-muted: #5c6573;
  --accent: #2876d8;
  --success: #2d8c4a;
  --warning: #b8870e;
  --alert: #c46615;
  --danger: #c5343a;
  --accent-tint: rgba(40, 118, 216, 0.16);
  --success-tint: rgba(45, 140, 74, 0.16);
  --warning-tint: rgba(184, 135, 14, 0.16);
  --alert-tint: rgba(196, 102, 21, 0.16);
  --danger-tint: rgba(197, 52, 58, 0.16);
  --chrome: rgba(255, 255, 255, 0.97);
  --nav: rgba(250, 248, 243, 0.98);
}

/* Space backdrop behind the globe — `position: fixed; inset: 0;` layer
   below the MapView canvas. Pinned to pure black in both themes so the
   light-mode cream never bleeds into the globe void. Stars are
   ~20 radial-gradients tiled at 600px so the pattern repeats invisibly
   across any viewport. Zero animation, zero JS — one GPU composite at
   load, free from then on. Tweak positions/alphas here only. */
.map-void {
  background-color: #000;
  background-image:
    radial-gradient(
      1px 1px at 47px 39px,
      rgba(255, 255, 255, 0.95),
      transparent
    ),
    radial-gradient(
      1px 1px at 113px 217px,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      1px 1px at 199px 81px,
      rgba(255, 250, 240, 0.85),
      transparent
    ),
    radial-gradient(
      1px 1px at 257px 343px,
      rgba(220, 230, 255, 0.85),
      transparent
    ),
    radial-gradient(
      1px 1px at 311px 159px,
      rgba(255, 255, 255, 0.75),
      transparent
    ),
    radial-gradient(
      1px 1px at 389px 271px,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      1px 1px at 451px 47px,
      rgba(255, 245, 225, 0.8),
      transparent
    ),
    radial-gradient(
      1px 1px at 523px 379px,
      rgba(255, 255, 255, 0.95),
      transparent
    ),
    radial-gradient(
      1px 1px at 73px 487px,
      rgba(255, 255, 255, 0.85),
      transparent
    ),
    radial-gradient(
      1.6px 1.6px at 83px 293px,
      rgba(255, 255, 255, 0.9),
      transparent 65%
    ),
    radial-gradient(
      1.6px 1.6px at 367px 109px,
      rgba(220, 230, 255, 0.85),
      transparent 65%
    ),
    radial-gradient(
      1.6px 1.6px at 491px 233px,
      rgba(255, 250, 240, 0.9),
      transparent 65%
    ),
    radial-gradient(
      1.6px 1.6px at 553px 547px,
      rgba(255, 250, 240, 0.85),
      transparent 65%
    ),
    radial-gradient(
      1px 1px at 23px 167px,
      rgba(255, 255, 255, 0.45),
      transparent
    ),
    radial-gradient(
      1px 1px at 151px 31px,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 233px 251px,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(
      1px 1px at 297px 401px,
      rgba(255, 255, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 421px 197px,
      rgba(255, 255, 255, 0.45),
      transparent
    ),
    radial-gradient(
      1px 1px at 549px 67px,
      rgba(255, 255, 255, 0.4),
      transparent
    );
  background-size: 600px 600px;
  background-repeat: repeat;
}

/* Region-panel (Sheet) slide-up entrance. Referenced by the inline `animation`
   in components/ui/Sheet.tsx. Kept short-travel + brief so panel opens read as
   snappy, not as a drawn-out slide (the perceived-latency polish pass). */
@keyframes wp-slide-up {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Generic spinner rotation. Used for inline progress indicators (auth/verify
   redirect, etc.) — a small ring with the accent on top, spun continuously. */
@keyframes wp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

* {
  box-sizing: border-box;
}

/* Flow layout primitive (components/ui/Flow.tsx): responsive flex-wrap panel
   tiling. Per-child sizing lives here because inline styles can't target
   children, and a `> *` rule (unlike a per-child wrapper div) flattens
   conditional fragments so every panel is its own flex tile. Each tile is at
   least --flow-basis wide, grows to share the row, wraps, and can shrink
   (min-width:0) so content never overflows the tile. */
.wp-flow > * {
  flex: 1 1 var(--flow-basis, 22rem);
  min-width: 0;
}

/* ---- Semantic style classes (FE-standardization Phase 1) ----
   Single-sourced replacements for the ~200 hand-rolled `panel`/`muted`/
   `errLine`/`panelTitle`/space-between-row style CONSTS that were re-declared
   per component (§3). Static, non-interactive patterns live here as classes:
   zero per-render style-object allocation, one canonical definition, consumed
   via `className="wp-…"`. A one-off override rides an inline `style={{…}}` on
   the same element (inline wins over the class). Interactive/composed patterns
   (button, modal, pill, field) stay component primitives — see the audit doc.
   Values mirror the former `components/ui/detailStyles.ts` tokens exactly so
   the migration shifts no pixels. */

/* Bordered surface card. (was detailStyles.panel + ~36 local `panel*` consts) */
.wp-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: var(--space-6);
}

/* Small uppercase muted heading inside a panel. (was detailStyles.panelTitle
   plus the local panelTitle / sectionTitle consts) */
.wp-section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

/* Muted body text. (was the ~40 local `muted`/`mutedStyle` consts) */
.wp-muted {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--text-base);
}

/* Smaller muted hint / fine print. (was `hint`/`emptyHint`/fine-print consts) */
.wp-hint {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

/* Inline error line under a form/field. (was the ~25 local `errLine`/
   `errorStyle` text consts, which uniformly carried a small top margin). */
.wp-err {
  margin: 0.25rem 0 0;
  color: var(--danger);
  font-size: var(--text-base);
}

/* Small uppercase muted field/stat label. Distinct from `.wp-section-title`
   (a panel heading) — this is the tiny label above a value/field/KPI. (was the
   ~15 local `kpiLabel`/`fieldLabel`/`statLabel`/`sectionHeader` consts.) */
.wp-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

/* A money/quantity cell in a row: tabular figures so columns of numbers line up
   digit-for-digit, semibold, and never wrapped or squeezed by a flex sibling.
   (was the 5 local `moneyCell` consts, byte-identical, in ShareTradingPanel /
   OwnershipPanel / ShareMarketSection / GroupPortfolioPanel / TreasuryPanel —
   every one of them a place where a misaligned column is a misread balance.) */
.wp-money {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Unstyled list reset. (was detailStyles.listReset + local copies) */
.wp-list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* THE standardized ✕ close/dismiss (IconButton `close`): a solid --danger circle
   with a white ✕, applied to EVERY close/dismiss across the UI — panels + modals
   (Sheet/DetailOverlay, FoundCompanyModal, SearchModal) AND transient dismisses
   (NoticeBanner, map Callout, install CTA) — so every dismiss reads identically
   and is unmissable. The one home for the close affordance's appearance. */
.wp-close {
  background: var(--danger);
  color: var(--on-accent);
  border: 0;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: filter 0.12s ease;
}
.wp-close:hover {
  filter: brightness(1.1);
}
.wp-close:active {
  filter: brightness(0.92);
}
.wp-close:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}

/* Visually-hidden but screen-reader-available (Local-First B.4). The standard
   clip-rect pattern — 1px clipped box, not `display:none` (which drops it from
   the a11y tree). `.wp-sr-only-focusable` reveals itself when focused: the base
   for the skip-to-main link, which stays invisible until a keyboard user Tabs
   to it. */
.wp-sr-only,
.wp-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The skip link when focused — a real, visible control at the top-left. */
.wp-skip-link:focus {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  /* Mirrors Z.skipLink (constants/zLayers.ts) — CSS can't import the TS record,
     so this literal is kept in sync by hand. Above the update banner (1000). */
  z-index: 1001;
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-5);
  clip: auto;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* Hide the browser's native up/down spinner controls on `<input
   type="number">`. Surfaces that want to step a numeric value pair the
   input with their own +/- buttons (see ConfiguratorPanel's pitch
   editor); the native controls visually overlap those custom buttons,
   and worse, the native "down" arrow sits exactly where the custom +
   button lives, producing clicks that decrease the value when the
   player intended to increase it. Hide them globally so the only
   step affordances are the explicit ones we render. Keyboard arrow
   keys + typing still work for accessibility. */
input[type="number"].wp-num-no-spin::-webkit-outer-spin-button,
input[type="number"].wp-num-no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].wp-num-no-spin {
  appearance: textfield;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.5;
  /* Native-app feel (B.4): kill the browser's pull-to-refresh + scroll-chaining
     bounce, the tap flash, and the long-press callout — so the frame reads like
     an installed app, not a web page. `user-select` is left at default so genuine
     content text stays selectable (the map owns its own zoom; page-zoom can't be
     hard-disabled on iOS Safari — see the viewport note in layout.tsx). */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /* Force slashed zeros across the whole UI so 0 is unambiguous against
     capital O. Browsers fall back to the unmodified glyph if the active
     font lacks the OpenType `zero` feature. font-variant-numeric is the
     modern shortcut; font-feature-settings is the legacy fallback. */
  font-variant-numeric: slashed-zero tabular-nums;
  font-feature-settings:
    "zero" 1,
    "tnum" 1, slashed-zero tabular-nums;
}

a {
  color: var(--accent);
}

/* Vestibular a11y (B.4): honor prefers-reduced-motion by neutralizing CSS
   animations + transitions. The JS-driven map motion (the idle globe-orbit spin
   + the in-flight plane interpolation) is gated separately in MapView, which
   reads this same media query — a free iOS-GPU saving too. */
@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;
  }
}