/* ==========================================================================
   Politoskop.pl — Design System & Haptic Micro-Aesthetics
   Built strictly according to design-taste-frontend & anti-ui-slop guidelines.
   Fonts: Geist & Geist Mono
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&display=swap');

:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

.font-mono, kbd, code {
  font-family: var(--font-mono) !important;
}

/* Mobile viewport stability — min-h-[100dvh] invariant */
html, body {
  height: 100%;
  min-height: 100dvh;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch;
}

/* ==================== MACHINED HARDWARE (DOUBLE-BEZEL) ==================== */
.machined-shell {
  background: rgba(241, 245, 249, 0.7);
  padding: 6px;
  border-radius: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.machined-shell-dark {
  background: rgba(15, 23, 42, 0.6);
  padding: 6px;
  border-radius: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(51, 65, 85, 0.6);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.machined-core {
  background: #ffffff;
  border-radius: calc(1.25rem - 6px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 8px 24px -4px rgba(15, 23, 42, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.machined-core-dark {
  background: #090d16;
  border-radius: calc(1.25rem - 6px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 12px 32px -4px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================== DIFFUSION SHADOWS ==================== */
.shadow-diffusion {
  box-shadow: 
    0 20px 40px -15px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(226, 232, 240, 0.8);
}

.shadow-diffusion-sm {
  box-shadow: 
    0 8px 20px -6px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(226, 232, 240, 0.7);
}

/* ==================== HAPTIC MICRO-INTERACTIONS ==================== */
.btn-tactile {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.btn-tactile:active {
  transform: scale(0.98) translateY(1px);
}

.hero-chip {
  cursor: pointer;
  user-select: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-chip:hover {
  transform: translateY(-1px);
}

.hero-chip:active {
  transform: scale(0.96) translateY(0);
}

/* Radar pulse indicator for live monitoring */
@keyframes radarPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.animate-radar {
  animation: radarPulse 2.4s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================== INTERPELLATION CARDS & LISTING ==================== */
.interpellation-card {
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-left-width: 3px !important;
  border-left-color: transparent !important;
}

.interpellation-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.06);
}

.interpellation-card.active {
  border-left-color: #2563eb !important;
  background: #f8fafc !important;
  box-shadow: 
    inset 0 0 0 1px rgba(37, 99, 235, 0.2),
    0 4px 14px -3px rgba(37, 99, 235, 0.12) !important;
}

/* ==================== CODE & TERMINAL ==================== */
.log-terminal {
  font-family: var(--font-mono);
  background-color: #090d16;
  color: #38bdf8;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.45;
  overflow-y: auto;
  max-height: 180px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ==================== SCROLLBAR STYLING ==================== */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Mobile reader slide animation */
@keyframes readerFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-reader-slide {
  animation: readerFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Search phrase highlighting */
mark.highlight {
  background-color: #fef08a;
  color: #713f12;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
}

/* ==========================================================================
   THEME 1: EDITORIAL LUXURY (PRASOWY / THE ATLANTIC)
   ========================================================================== */
body.theme-editorial {
  background-color: #fdfbf7 !important;
  color: #1c1917 !important;
}
body.theme-editorial #view-landing {
  background-color: #fdfbf7 !important;
}
body.theme-editorial header {
  background-color: #1c1917 !important;
  border-bottom: 1px solid #292524 !important;
}
body.theme-editorial header span.text-blue-500 {
  color: #d97706 !important;
}
body.theme-editorial .btn-tactile.bg-blue-600,
body.theme-editorial #hero-search-btn {
  background-color: #b45309 !important;
}
body.theme-editorial #hero-search-btn:hover {
  background-color: #92400e !important;
}
body.theme-editorial section:first-of-type {
  background-color: #f7f2ea !important;
  color: #1c1917 !important;
  border-bottom: 1px solid #e5dccd !important;
}
body.theme-editorial section:first-of-type h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #1c1917 !important;
  letter-spacing: -0.02em !important;
}
body.theme-editorial section:first-of-type p {
  color: #57534e !important;
}
body.theme-editorial section:first-of-type .machined-shell-dark {
  background: #ebe3d3 !important;
  box-shadow: inset 0 0 0 1px #d6cbba !important;
}
body.theme-editorial section:first-of-type .machined-core-dark {
  background: #ffffff !important;
  box-shadow: 0 4px 20px -2px rgba(44, 35, 25, 0.06) !important;
}
body.theme-editorial section:first-of-type input {
  color: #1c1917 !important;
}
body.theme-editorial section:first-of-type label {
  color: #78716c !important;
}
body.theme-editorial section:first-of-type .bg-slate-900\/90,
body.theme-editorial section:first-of-type .bg-slate-900\/60 {
  background-color: #faf7f2 !important;
  border-color: #e5dccd !important;
}
body.theme-editorial section:first-of-type .text-white {
  color: #1c1917 !important;
}
body.theme-editorial section:first-of-type .text-slate-300,
body.theme-editorial section:first-of-type .text-slate-400 {
  color: #78716c !important;
}
body.theme-editorial .hero-chip {
  background-color: #f3ece0 !important;
  border-color: #e2d7c5 !important;
  color: #44403c !important;
}
body.theme-editorial .hero-chip:hover {
  background-color: #e8ded0 !important;
  color: #1c1917 !important;
}
body.theme-editorial .machined-shell {
  background: #f7f2e9 !important;
  box-shadow: inset 0 0 0 1px #e5dcce !important;
}
body.theme-editorial .machined-core {
  background: #ffffff !important;
  box-shadow: 0 4px 16px -2px rgba(44, 35, 25, 0.04) !important;
}
body.theme-editorial .machined-core h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
}
body.theme-editorial #landing-stat-circle {
  stroke: #d97706 !important;
}

/* ==========================================================================
   THEME 2: SOFT STRUCTURALISM (SWISS LIGHT / LINEAR)
   ========================================================================== */
body.theme-swiss {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
body.theme-swiss #view-landing {
  background-color: #f8fafc !important;
}
body.theme-swiss header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
body.theme-swiss header span.text-white {
  color: #0f172a !important;
}
body.theme-swiss header .bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body.theme-swiss header button,
body.theme-swiss header nav button,
body.theme-swiss header nav a {
  color: #475569 !important;
}
body.theme-swiss header button:hover,
body.theme-swiss header nav button:hover,
body.theme-swiss header nav a:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}
body.theme-swiss header #nav-tab-landing {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
body.theme-swiss section:first-of-type {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
body.theme-swiss section:first-of-type h1 {
  color: #020617 !important;
}
body.theme-swiss section:first-of-type p {
  color: #475569 !important;
}
body.theme-swiss section:first-of-type .machined-shell-dark {
  background: #f1f5f9 !important;
  box-shadow: inset 0 0 0 1px #e2e8f0 !important;
}
body.theme-swiss section:first-of-type .machined-core-dark {
  background: #ffffff !important;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.06), 0 0 0 1px #e2e8f0 !important;
}
body.theme-swiss section:first-of-type input {
  color: #0f172a !important;
}
body.theme-swiss section:first-of-type label {
  color: #64748b !important;
}
body.theme-swiss section:first-of-type .bg-slate-900\/90,
body.theme-swiss section:first-of-type .bg-slate-900\/60 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
body.theme-swiss section:first-of-type .text-white {
  color: #0f172a !important;
}
body.theme-swiss section:first-of-type .text-slate-300,
body.theme-swiss section:first-of-type .text-slate-400 {
  color: #64748b !important;
}
body.theme-swiss .hero-chip {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
body.theme-swiss .hero-chip:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body.theme-swiss .machined-shell {
  background: #f1f5f9 !important;
  box-shadow: inset 0 0 0 1px #e2e8f0 !important;
}
body.theme-swiss .machined-core {
  background: #ffffff !important;
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
}

/* ==========================================================================
   THEME 3: TERMINAL COCKPIT (BLOOMBERG / PALANTIR)
   ========================================================================== */
body.theme-terminal {
  background-color: #070a11 !important;
  color: #cbd5e1 !important;
  font-family: var(--font-mono) !important;
}
body.theme-terminal #view-landing {
  background-color: #070a11 !important;
}
body.theme-terminal header {
  background-color: #05080e !important;
  border-bottom: 1px solid #1e293b !important;
}
body.theme-terminal section:first-of-type {
  background-color: #070a11 !important;
  border-bottom: 1px solid #1e293b !important;
}
body.theme-terminal section:nth-of-type(2) {
  background-color: #070a11 !important;
}
body.theme-terminal .machined-shell,
body.theme-terminal .machined-shell-dark {
  background: #0b0f19 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px #1e293b !important;
  padding: 4px !important;
}
body.theme-terminal .machined-core,
body.theme-terminal .machined-core-dark {
  background: #0d1322 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 1px solid #1e293b !important;
}
body.theme-terminal h1,
body.theme-terminal h2,
body.theme-terminal h3 {
  font-family: var(--font-mono) !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.02em !important;
}
body.theme-terminal .machined-core h3 {
  color: #f8fafc !important;
}
body.theme-terminal .machined-core p {
  color: #94a3b8 !important;
}
body.theme-terminal .machined-core td,
body.theme-terminal .machined-core th {
  font-family: var(--font-mono) !important;
}
body.theme-terminal .btn-tactile.bg-blue-600,
body.theme-terminal #hero-search-btn {
  background-color: #059669 !important;
  border-radius: 4px !important;
}
body.theme-terminal button,
body.theme-terminal input,
body.theme-terminal .hero-chip {
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
}
body.theme-terminal #landing-stat-circle {
  stroke: #10b981 !important;
}