/* Vortex // WICKED - shared visual layer
   Typography, editorial motion, and micro-interactions that keep the
   "Curated Earth" rhythm coherent across every page.
   Type stack ported from ../../Vortex-Design-System/colors_and_type.css:
     Display  → Instrument Serif  (Gowun Batang for Hangul)
     Body     → Inter Tight       (Noto Sans KR for Hangul)
     Mono     → JetBrains Mono    (Noto Sans KR fallback) */
@import url('./vendor/fonts/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --vtx-font-serif: 'Instrument Serif', 'Gowun Batang', 'Times New Roman', ui-serif, serif;
  --vtx-font-sans:  'Inter Tight', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vtx-font-mono:  'JetBrains Mono', 'Noto Sans KR', ui-monospace, 'SF Mono', Menlo, monospace;
  --vtx-background: #fcf9ef;
  --vtx-surface: #fcf9ef;
  --vtx-container: #f0eee4;
  --vtx-container-low: #f6f4ea;
  --vtx-container-high: #eae8de;
  --vtx-container-highest: #e4e3d9;
  --vtx-container-lowest: #ffffff;
  --vtx-primary: #994528;
  --vtx-primary-container: #da7756;
  --vtx-secondary: #006874;
  --vtx-secondary-container: #9cf0fe;
  --vtx-on-surface: #1b1c16;
  --vtx-on-surface-variant: #55433d;
  --vtx-outline-variant: #dbc1b9;
  --vtx-error: #ba1a1a;
}

* { scroll-behavior: smooth; }

/* Dark theme — keep curated-earth palette but invert ink/surface tokens so
   every class built on CSS variables (cards, glass panels, inputs) re-skins
   automatically when .dark is toggled by app.js. */
html.dark {
  /* ── Core surface tokens (deep charcoal, warm-earth tint) ── */
  --vtx-background: #151612;
  --vtx-surface: #1a1b16;
  --vtx-container-lowest: #1c1d18;
  --vtx-container-low: #1e201b;
  --vtx-container: #23251f;
  --vtx-container-high: #292b25;
  --vtx-container-highest: #2f3128;
  /* ── Ink tokens ── */
  --vtx-on-surface: #e8e6dc;
  --vtx-on-surface-variant: #b3ad9e;
  /* ── Outline tokens ── */
  --vtx-outline: #88726c;
  --vtx-outline-variant: #4a3e39;
  /* ── Brand tokens — lightened for contrast on dark ── */
  --vtx-primary: #da7756;
  --vtx-primary-container: #ffbd95;
  --vtx-secondary: #7fd3e1;
  --vtx-secondary-container: #004f58;
  /* ── Semantic tokens ── */
  --vtx-error: #ffb4ab;
  --vtx-success: #7fd3a1;
  --vtx-warning: #f5c96a;
}

/* ── Base ── */
html.dark body { background: var(--vtx-background); color: var(--vtx-on-surface); }

/* ── Surface background utilities ── */
html.dark .bg-background { background-color: var(--vtx-background) !important; }
html.dark .bg-surface,
html.dark .bg-surface-container { background-color: var(--vtx-container) !important; }
html.dark .bg-surface-container-low { background-color: var(--vtx-container-low) !important; }
html.dark .bg-surface-container-high { background-color: var(--vtx-container-high) !important; }
html.dark .bg-surface-container-highest { background-color: var(--vtx-container-highest) !important; }
html.dark .bg-surface-container-lowest { background-color: var(--vtx-container-lowest) !important; }

/* ── Hardcoded white/black overrides ── */
html.dark .bg-white { background-color: var(--vtx-container-low) !important; }
html.dark .text-black { color: var(--vtx-on-surface) !important; }

/* ── Text color utilities ── */
html.dark .text-on-surface { color: var(--vtx-on-surface) !important; }
html.dark .text-on-surface-variant { color: var(--vtx-on-surface-variant) !important; }
html.dark .text-on-background { color: var(--vtx-on-surface) !important; }
html.dark .text-primary { color: var(--vtx-primary) !important; }
html.dark .text-secondary { color: var(--vtx-secondary) !important; }
html.dark .text-error { color: var(--vtx-error) !important; }

/* ── Border utilities ── */
html.dark .border-outline-variant,
html.dark .border-outline-variant\/60,
html.dark .border-outline-variant\/50,
html.dark .border-outline-variant\/40,
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant\/20 { border-color: var(--vtx-outline-variant) !important; }
html.dark .divide-outline-variant\/20 > * + * { border-color: var(--vtx-outline-variant) !important; }

/* ── Glass surfaces ── */
html.dark .glass { background: rgba(26, 27, 22, 0.78); }
html.dark .glass-soft { background: rgba(30, 32, 27, 0.78); }

/* ── Form controls ── */
html.dark .vtx-input {
  border-bottom-color: rgba(74, 62, 57, 0.65);
  color: var(--vtx-on-surface);
}
html.dark .vtx-input::placeholder { color: var(--vtx-on-surface-variant); opacity: 0.6; }
html.dark .field-input {
  background-color: var(--vtx-container-lowest) !important;
  color: var(--vtx-on-surface) !important;
  border-color: var(--vtx-outline-variant) !important;
}
html.dark .field-input::placeholder { color: var(--vtx-on-surface-variant); opacity: 0.65; }
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
  background-color: var(--vtx-container-lowest) !important;
  color: var(--vtx-on-surface) !important;
  border-color: var(--vtx-outline-variant) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--vtx-on-surface-variant); opacity: 0.65; }

/* ── Buttons ── */
html.dark .vtx-btn { color: var(--vtx-on-surface); }
html.dark .vtx-btn.bg-primary { color: #1a1b16; }
html.dark .vtx-btn.bg-white { background-color: var(--vtx-container-high) !important; color: var(--vtx-primary) !important; }

/* ── Card hover ── */
html.dark .vtx-card:hover { background: var(--vtx-container-highest); }

/* ── Code / pre ── */
html.dark code,
html.dark pre { background-color: var(--vtx-container-high); color: var(--vtx-on-surface); }

/* ── Table ── */
html.dark table { color: var(--vtx-on-surface); }
html.dark table tbody tr:hover td { background-color: var(--vtx-container-high); }

/* ── Inline table row hovers (admin-specific, override per-page rules) ── */
html.dark .evt-row:hover td,
html.dark .user-row:hover td { background: rgba(41, 43, 37, 0.8) !important; }

/* ── Shadows ── */
html.dark .shadow-ambient { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }

/* ── Modal / dialog ── */
html.dark .vtx-modal,
html.dark [role="dialog"] { background: var(--vtx-container-low); color: var(--vtx-on-surface); }
html.dark .vtx-modal-backdrop { background: rgba(0,0,0,0.65); }

/* ── Status badge colour-tints ── */
html.dark .bg-\[\#006874\]\/10 { background-color: rgba(127, 211, 225, 0.15) !important; }
html.dark .text-\[\#006874\] { color: #7fd3e1 !important; }
html.dark .bg-\[\#994528\]\/10 { background-color: rgba(218, 119, 86, 0.15) !important; }
html.dark .text-\[\#994528\] { color: #da7756 !important; }
html.dark .bg-\[\#ba1a1a\]\/10 { background-color: rgba(255, 180, 171, 0.18) !important; }
html.dark .text-\[\#ba1a1a\] { color: #ffb4ab !important; }
html.dark .bg-\[\#55433d\]\/10 { background-color: rgba(179, 173, 158, 0.15) !important; }
html.dark .text-\[\#55433d\] { color: #b3ad9e !important; }

/* ── Gradient editorial backgrounds ── */
html.dark .hero-bg-gradient,
html.dark [data-editorial-bg] {
  background: linear-gradient(135deg, #23251f 0%, #1a1b16 100%) !important;
}

/* ── Admin page-specific chips (outcome/status/plan) ── */
html.dark .outcome-ok { background: rgba(127, 211, 225, 0.15) !important; color: var(--vtx-secondary) !important; }
html.dark .outcome-warn { background: rgba(218, 119, 86, 0.15) !important; color: var(--vtx-primary) !important; }
html.dark .status-chip--ok { background: rgba(127, 211, 225, 0.12) !important; color: var(--vtx-secondary) !important; }
html.dark .status-chip--warn { background: rgba(218, 119, 86, 0.12) !important; color: var(--vtx-primary) !important; }
html.dark .status-chip--error { background: rgba(255, 180, 171, 0.15) !important; color: var(--vtx-error) !important; }
html.dark .plan-pro { background: rgba(218, 119, 86, 0.15) !important; color: var(--vtx-primary) !important; }
html.dark .plan-ent { background: rgba(127, 211, 225, 0.15) !important; color: var(--vtx-secondary) !important; }
html.dark .plan-free { background: var(--vtx-container-high) !important; color: var(--vtx-on-surface-variant) !important; }

/* ── Tab / seg-pill ── */
html.dark .seg-pill[aria-selected="false"]:hover { background: var(--vtx-container-high) !important; }
html.dark .vtx-tab[aria-selected="true"] { background: var(--vtx-on-surface); color: var(--vtx-background); }

/* ── Skeleton loading bars ── */
html.dark .vtx-skeleton {
  background: linear-gradient(100deg, var(--vtx-container) 30%, var(--vtx-container-high) 50%, var(--vtx-container) 70%);
  background-size: 200% 100%;
}

/* ── Chart tooltip (dark variant — overrides the base rule below) ── */
html.dark .vtx-chart-tooltip {
  background: var(--vtx-container-high);
  color: var(--vtx-on-surface);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
html.dark .vtx-chart-tooltip .vtx-tt-ts { color: var(--vtx-on-surface-variant); }

html, body { background: var(--vtx-background); color: var(--vtx-on-surface); }
body {
  font-family: var(--vtx-font-sans);
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.serif, h1, h2, h3, h4, .font-headline { font-family: var(--vtx-font-serif); letter-spacing: -0.02em; }
code, pre, .font-mono, .vtx-mono { font-family: var(--vtx-font-mono); }

/* Korean optical adjustments — ported from DS colors_and_type.css.
   Activate via <html data-lang="ko"> (handled by app.js when needed). */
:root[data-lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
:root[data-lang="ko"] body h1, :root[data-lang="ko"] body .h1 { font-size: clamp(26px, 4vw, 52px); letter-spacing: -0.01em; line-height: 1.2; }
:root[data-lang="ko"] body h2, :root[data-lang="ko"] body .h2 { font-size: clamp(22px, 3vw, 42px); letter-spacing: -0.005em; line-height: 1.22; }
:root[data-lang="ko"] body h3, :root[data-lang="ko"] body .h3 { font-size: clamp(17px, 1.8vw, 22px); letter-spacing: 0; line-height: 1.3; }

/* First-letter avatar — replaces external CDN profile images */
.vtx-avatar { display:inline-flex; width:2.5rem; height:2.5rem; border-radius:9999px; background:rgba(153,69,40,.1); color:#994528; font-weight:600; align-items:center; justify-content:center; }

/* Brand lockup — SVG mark + serif wordmark + mono tag, per DS preview/logo-lockup.html */
.vtx-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.vtx-brand__mark { width: 2.1rem; height: 2.1rem; flex-shrink: 0; }
.vtx-brand__mark--lg { width: 3.25rem; height: 3.25rem; }
.vtx-brand__text { display: flex; flex-direction: column; line-height: 0.95; }
.vtx-brand__wordmark { font-family: var(--vtx-font-serif); font-size: 1.55rem; letter-spacing: -0.03em; color: var(--vtx-on-surface); }
.vtx-brand__wordmark--lg { font-size: 2.2rem; }
.vtx-brand__sub { font-family: var(--vtx-font-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vtx-primary); margin-top: 0.25rem; }
.vtx-brand__mark--dark { display: none; }
.dark .vtx-brand__mark--light { display: none; }
.dark .vtx-brand__mark--dark { display: inline-block; }
.dark .vtx-brand__wordmark { color: #faf7f0; }
.dark .vtx-brand__sub { color: #ffbd95; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined[data-fill="1"] { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.glass-soft {
  background: rgba(252, 249, 239, 0.7);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Scroll-reveal baseline */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: translateY(0); }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }

/* Shrinking header on scroll */
.vtx-header { transition: padding 300ms ease, box-shadow 300ms ease, background 300ms ease; }
.vtx-header.is-compact { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; box-shadow: 0 10px 30px rgba(27, 28, 22, 0.05); }

/* Underline hover for nav links */
.vtx-nav-link {
  position: relative;
  transition: color 300ms ease;
}
.vtx-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--vtx-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vtx-nav-link:hover { color: var(--vtx-primary); }
.vtx-nav-link:hover::after,
.vtx-nav-link.is-active::after { transform: scaleX(1); }
.vtx-nav-link.is-active { color: var(--vtx-primary); font-weight: 600; }

/* Button with liquid shimmer hover */
.vtx-btn {
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 300ms ease, background 300ms ease, color 300ms ease;
}
.vtx-btn:hover { transform: translateY(-1px); }
.vtx-btn:active { transform: translateY(0); }
.vtx-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 700ms ease;
}
.vtx-btn:hover::after { left: 160%; }

/* Card hover (editorial lift without shadow cheapness) */
.vtx-card { transition: transform 350ms ease, background 350ms ease, box-shadow 500ms ease; }
.vtx-card:hover { background: var(--vtx-container-lowest); box-shadow: 0 18px 40px rgba(27,28,22,0.07); transform: translateY(-4px); }
.vtx-card-static { transition: background 400ms ease, box-shadow 400ms ease; }

/* Pulsing live dot */
.vtx-live-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background: var(--vtx-secondary);
  box-shadow: 0 0 0 0 rgba(0, 104, 116, 0.45);
  animation: vtx-pulse 1.8s infinite;
}
.vtx-live-dot--warn { background: var(--vtx-primary-container); box-shadow: 0 0 0 0 rgba(218, 119, 86, 0.5); animation-name: vtx-pulse-warn; }
.vtx-live-dot--error { background: var(--vtx-error); box-shadow: 0 0 0 0 rgba(186, 26, 26, 0.45); animation-name: vtx-pulse-error; }
@keyframes vtx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 104, 116, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(0, 104, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 104, 116, 0); }
}
@keyframes vtx-pulse-warn {
  0% { box-shadow: 0 0 0 0 rgba(218, 119, 86, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(218, 119, 86, 0); }
  100% { box-shadow: 0 0 0 0 rgba(218, 119, 86, 0); }
}
@keyframes vtx-pulse-error {
  0% { box-shadow: 0 0 0 0 rgba(186, 26, 26, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(186, 26, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(186, 26, 26, 0); }
}

/* Animated bar chart */
.vtx-bar-track { position: relative; border-radius: 0.25rem; background: var(--vtx-container-highest); overflow: hidden; }
.vtx-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  transition: height 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vtx-bar-track.is-visible .vtx-bar { height: var(--bar, 50%); }
.vtx-bar-track:hover .vtx-bar { filter: brightness(1.08); }

/* Toast */
.vtx-toast-stack {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 80;
  display: flex; flex-direction: column; gap: 0.6rem;
  pointer-events: none;
}
.vtx-toast {
  pointer-events: auto;
  padding: 0.85rem 1.2rem;
  border-radius: 0.9rem;
  font-size: 0.85rem;
  color: #fff;
  background: var(--vtx-secondary);
  box-shadow: 0 18px 40px rgba(27,28,22,0.18);
  animation: vtx-toast-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vtx-toast.is-leaving { animation: vtx-toast-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.vtx-toast--error { background: var(--vtx-error); }
.vtx-toast--warn { background: var(--vtx-primary); }
@keyframes vtx-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes vtx-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}

/* Input bottom-border focus (editorial minimalism) */
.vtx-input {
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(219, 193, 185, 0.35);
  padding: 0.55rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 250ms ease;
  width: 100%;
}
.vtx-input:focus { border-bottom-color: var(--vtx-secondary); }
.vtx-input::placeholder { color: rgba(85, 67, 61, 0.55); }

/* Animated counter highlight after tick */
.vtx-counter { transition: color 220ms ease, transform 220ms ease; }
.vtx-counter.is-ticked { color: var(--vtx-primary); transform: translateY(-2px); }

/* Pricing card spotlight ring */
.vtx-spotlight { position: relative; }
.vtx-spotlight::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(218,119,86,0.45), rgba(153,69,40,0.6));
  filter: blur(18px);
  opacity: 0.35;
  z-index: -1;
}

/* Mobile nav drawer */
.vtx-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(27, 28, 22, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.vtx-drawer.is-open { opacity: 1; pointer-events: auto; }
.vtx-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 22rem);
  background: var(--vtx-background);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 2rem 1.6rem 1.6rem;
}
.vtx-drawer.is-open .vtx-drawer__panel { transform: translateX(0); }

/* Animated chart bars, log feed typing, tabbed tables */
.vtx-tab {
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 9999px;
  transition: color 200ms ease, background 220ms ease;
  cursor: pointer;
}
.vtx-tab[aria-selected="true"] {
  background: var(--vtx-on-surface);
  color: var(--vtx-background);
}

/* Skeleton pulse for loading placeholders */
.vtx-skeleton {
  background: linear-gradient(100deg, var(--vtx-container) 30%, var(--vtx-container-high) 50%, var(--vtx-container) 70%);
  background-size: 200% 100%;
  animation: vtx-skel 1.6s ease-in-out infinite;
}
@keyframes vtx-skel { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* Fade-in for event log newcomers */
.vtx-log-entry { opacity: 0; transform: translateY(6px); animation: vtx-log-in 400ms ease forwards; }
@keyframes vtx-log-in { to { opacity: 1; transform: translateY(0); } }

/* Cursor blink for terminal-y labels */
.vtx-cursor::after {
  content: "▍";
  margin-left: 0.15rem;
  color: var(--vtx-primary);
  animation: vtx-blink 1.1s steps(2) infinite;
}
@keyframes vtx-blink { 50% { opacity: 0; } }

/* ── VtxTable / VtxPagination utilities ── */
.vtx-table-sort-indicator { opacity: 0.4; font-size: 0.7em; margin-left: 0.25rem; }
.vtx-table-sort-indicator.active { opacity: 1; color: var(--vtx-primary, #994528); }
.vtx-bulk-bar { position: sticky; bottom: 1rem; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; margin-top: 0.75rem; background: var(--vtx-container-low, #f6f4ea); border-radius: 0.75rem; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.vtx-bulk-bar.visible { display: flex; }
.vtx-bulk-bar button { padding: 0.4rem 0.9rem; border-radius: 0.5rem; font-size: 0.875rem; }
.vtx-bulk-bar button.primary { background: #994528; color: white; }
.vtx-bulk-bar button.danger { background: #ba1a1a; color: white; }
.vtx-bulk-bar button.ghost { background: transparent; border: 1px solid rgba(136, 114, 108, 0.5); color: #55433d; }

/* Scroll-triggered number tick color */
.vtx-highlight { position: relative; overflow: hidden; }
.vtx-highlight::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(218, 119, 86, 0.18), transparent);
  transform: translateX(-120%);
  transition: transform 900ms ease;
}
.vtx-highlight.is-visible::after { transform: translateX(120%); }

/* Reduced motion safeguard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Section breathing */
section { scroll-margin-top: 6rem; }

/* Editorial emphasis */
.italic-serif { font-family: 'Newsreader', serif; font-style: italic; }

/* Utility spacers */
.vtx-break-all { word-break: break-all; overflow-wrap: anywhere; }

/* Admin shell — injected by assets/admin-shell.js. The fixed sidebar is
   lg+-only, so push content on large viewports and leave it edge-to-edge on
   mobile (mobile drawer handles nav). */
@media (min-width: 1024px) {
  body.has-admin-shell > main,
  body.has-admin-shell > header,
  body.has-admin-shell > footer,
  body.has-admin-shell > section,
  body.has-admin-shell > div:not([data-admin-sidebar]):not(.vtx-drawer):not([data-drawer-toggle]) {
    margin-left: 16rem;
  }
}
body.has-admin-shell { min-height: 100vh; }

/* Focus-visible — design system: 2px outline in secondary (#006874), 2px offset.
   Only applied via :focus-visible so keyboard users get clear indicators
   without affecting mouse interactions. */
.vtx-btn:focus-visible,
.vtx-nav-link:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid #006874;
  outline-offset: 2px;
}

/* ── VtxChart — reusable SVG area chart ───────────────────────────── */
.vtx-chart-container { position: relative; }
.vtx-chart-tooltip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: #ffffff;
  color: #1b1c16;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  min-width: 120px;
  opacity: 0;
  transition: opacity 80ms ease;
  white-space: nowrap;
}
.vtx-chart-tooltip.visible { opacity: 1; }
.vtx-chart-tooltip .vtx-tt-ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #55433d;
  margin-bottom: 4px;
}
.vtx-chart-tooltip .vtx-tt-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vtx-chart-tooltip .vtx-tt-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
/* html.dark .vtx-chart-tooltip — defined in the expanded dark block above */

/* ── vtx-skeleton ──────────────────────────────────────────────────────────── */
.vtx-skeleton { display: inline-block; height: 0.9em; border-radius: 4px; background: linear-gradient(90deg, rgba(85,67,61,0.08) 0%, rgba(85,67,61,0.18) 50%, rgba(85,67,61,0.08) 100%); background-size: 200% 100%; animation: vtx-skeleton-shimmer 1.4s ease-in-out infinite; }
@keyframes vtx-skeleton-shimmer { 0%{background-position: 200% 0} 100%{background-position: -200% 0} }
@media (prefers-reduced-motion: reduce) { .vtx-skeleton { animation: none; background: rgba(85,67,61,0.12); } }
.vtx-skeleton.block { display: block; width: 100%; }
.vtx-skeleton-row td { padding: 0.75rem 1rem; }
.vtx-skeleton-row td .vtx-skeleton { width: 80%; }
html.dark .vtx-skeleton { background: linear-gradient(90deg, rgba(232,230,220,0.06) 0%, rgba(232,230,220,0.14) 50%, rgba(232,230,220,0.06) 100%); background-size: 200% 100%; }
html.dark .vtx-skeleton[data-reduce] { background: rgba(232,230,220,0.08); }

/* ── vtx-optimistic ────────────────────────────────────────────────────────── */
.vtx-optimistic-pending { opacity: 0.55; pointer-events: none; transition: opacity 120ms ease; }

/* ── vtx-csv button ────────────────────────────────────────────────────────── */
.vtx-csv-btn { cursor: pointer; transition: background 140ms, border-color 140ms; }
.vtx-csv-btn:hover { background: var(--vtx-surface-container); }

/* ── vtx-cmdk — command palette ─────────────────────────────────────────────── */
.vtx-cmdk-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 100; display: none; }
.vtx-cmdk-backdrop.visible { display: flex; align-items: flex-start; justify-content: center; padding-top: 8rem; }
.vtx-cmdk-dialog { width: 100%; max-width: 40rem; background: var(--vtx-container-lowest, #ffffff); color: var(--vtx-on-surface, #1b1c16); border-radius: 1rem; box-shadow: 0 24px 48px rgba(0,0,0,0.2); overflow: hidden; max-height: 70vh; display: flex; flex-direction: column; }
.vtx-cmdk-input { width: 100%; padding: 1rem 1.25rem; border: 0; outline: 0; background: transparent; color: inherit; font-size: 0.95rem; }
.vtx-cmdk-list { overflow-y: auto; flex: 1; padding: 0.5rem; }
.vtx-cmdk-section { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.75rem 0.75rem 0.25rem; color: rgba(85, 67, 61, 0.7); }
.vtx-cmdk-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.9rem; }
.vtx-cmdk-item:hover, .vtx-cmdk-item.selected { background: rgba(153, 69, 40, 0.08); color: #994528; }
.vtx-cmdk-item .hint { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.5; }
.vtx-cmdk-footer { padding: 0.5rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(85, 67, 61, 0.7); border-top: 1px solid rgba(219, 193, 185, 0.3); }
html.dark .vtx-cmdk-dialog { background: var(--vtx-container-low, #1e201b); color: var(--vtx-on-surface, #e8e6dc); }
html.dark .vtx-cmdk-item:hover, html.dark .vtx-cmdk-item.selected { background: rgba(218, 119, 86, 0.15); color: var(--vtx-primary, #da7756); }

/* ── VtxForm — real-time validation feedback ───────────────────────────── */
.vtx-form-error {
  color: var(--vtx-error, #ba1a1a);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  line-height: 1.4;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 120ms, max-height 160ms;
  display: block;
}
.vtx-form-error.visible { opacity: 1; max-height: 3rem; }
.vtx-form-field-valid input,
.vtx-form-field-valid select,
.vtx-form-field-valid textarea { border-color: rgba(0,104,116,0.45) !important; }
.vtx-form-field-invalid input,
.vtx-form-field-invalid select,
.vtx-form-field-invalid textarea { border-color: var(--vtx-error, #ba1a1a) !important; }
html.dark .vtx-form-field-invalid input,
html.dark .vtx-form-field-invalid select,
html.dark .vtx-form-field-invalid textarea { border-color: #ffb4ab !important; }
html.dark .vtx-form-error { color: #ffb4ab; }

/* ── Admin mobile sidebar drawer ───────────────────────────────────────── */
/* Admin shell already injects a vtx-drawer + hamburger trigger on mobile.
   The drawer slides from the right. No additional JS file needed. */

/* ── Mobile table horizontal scroll ───────────────────────────────────── */
@media (max-width: 768px) {
  .vtx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vtx-table-wrap table { min-width: 640px; }
}

/* ── Mobile modal sizing ───────────────────────────────────────────────── */
@media (max-width: 639px) {
  .vtx-modal > div,
  [role="dialog"] > div { max-width: 95vw !important; margin: 0.5rem !important; }
}

/* ── Small touch-target safety ─────────────────────────────────────────── */
@media (max-width: 639px) {
  .vtx-mobile-hide { display: none; }
}

/* ── Notification drawer ────────────────────────────────────────────────── */
.vtx-notif-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 89; display: none; }
.vtx-notif-backdrop.visible { display: block; }
.vtx-notif-drawer { position: fixed; right: -400px; top: 0; height: 100vh; width: 380px; max-width: 90vw; background: var(--vtx-container-lowest, #ffffff); z-index: 90; transition: right 180ms ease; box-shadow: -8px 0 32px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.vtx-notif-drawer.visible { right: 0; }
.vtx-notif-header { padding: 1.25rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--vtx-outline-variant, rgba(219,193,185,0.3)); }
.vtx-notif-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
.vtx-notif-item { padding: 0.75rem; border-radius: 0.5rem; cursor: pointer; border-left: 3px solid transparent; }
.vtx-notif-item:hover { background: rgba(85,67,61,0.06); }
.vtx-notif-item.unread { background: rgba(153,69,40,0.05); border-left-color: rgba(153,69,40,0.4); }
.vtx-notif-item .title { font-weight: 600; font-size: 0.875rem; }
.vtx-notif-item .body { font-size: 0.8125rem; opacity: 0.8; margin-top: 0.15rem; }
.vtx-notif-item .time { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.6; margin-top: 0.25rem; }
.vtx-notif-badge { position: absolute; top: 4px; right: 4px; min-width: 14px; height: 14px; padding: 0 4px; background: #ba1a1a; color: #fff; border-radius: 7px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
html.dark .vtx-notif-drawer { background: var(--vtx-container-low, #1e201b); }
html.dark .vtx-notif-item.unread { background: rgba(218,119,86,0.12); border-left-color: rgba(218,119,86,0.5); }

/* ── VtxDetail — slide-in detail panel + hover tooltip ─────────────────── */
.vtx-detail-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 91; display: none; }
.vtx-detail-backdrop.visible { display: block; }
.vtx-detail-panel { position: fixed; right: -520px; top: 0; height: 100vh; width: 480px; max-width: 90vw; background: var(--vtx-container-lowest, #fff); color: var(--vtx-on-surface, #1b1c16); z-index: 92; transition: right 200ms ease; box-shadow: -12px 0 48px rgba(0,0,0,0.18); display: flex; flex-direction: column; }
.vtx-detail-panel.visible { right: 0; }
.vtx-detail-header { padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--vtx-outline-variant, rgba(219,193,185,0.3)); flex-shrink: 0; }
.vtx-detail-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.vtx-detail-tooltip { position: fixed; z-index: 93; background: var(--vtx-container-highest, #e4e3d9); color: var(--vtx-on-surface, #1b1c16); padding: 0.5rem 0.75rem; border-radius: 0.5rem; max-width: 20rem; font-size: 0.8125rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); pointer-events: none; opacity: 0; transition: opacity 100ms; }
.vtx-detail-tooltip.visible { opacity: 1; }
html.dark .vtx-detail-panel { background: var(--vtx-container-low, #1e201b); color: var(--vtx-on-surface, #e8e6dc); }
html.dark .vtx-detail-tooltip { background: var(--vtx-container-high, #2f3128); color: #fff; }
@media (max-width: 639px) { .vtx-detail-panel { max-width: 100vw; } }

/* ── Undo toast stack ───────────────────────────────────────────────────── */
.vtx-undo-stack { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.vtx-undo-toast { pointer-events: auto; background: var(--vtx-container-high, #2f3128); color: #fff; padding: 0.75rem 1rem; border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 0.75rem; min-width: 280px; position: relative; overflow: hidden; }
.vtx-undo-toast .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--vtx-primary, #da7756); width: 100%; transform-origin: left; animation: vtx-undo-drain 5s linear forwards; }
@keyframes vtx-undo-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.vtx-undo-toast button { color: var(--vtx-primary, #da7756); background: transparent; border: 0; font-weight: 600; cursor: pointer; margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE UX POLISH — comprehensive responsive layer
   Scope: 375px (iPhone SE) → 768px (small tablet).
   All rules are inside media queries so desktop layout is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Broad 767px breakpoint ─────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Hero display type — scale down huge serif headlines */
  h1.serif.text-6xl, h1.serif.text-7xl, h1.serif.text-8xl,
  .serif.text-7xl, .serif.text-8xl { font-size: 2.5rem !important; line-height: 1.05 !important; }
  .serif.text-6xl { font-size: 2.25rem !important; line-height: 1.1 !important; }
  .serif.text-5xl { font-size: 2rem !important; line-height: 1.12 !important; }
  h1.font-headline.text-6xl, .font-headline.text-6xl,
  h1.font-headline.text-5xl, .font-headline.text-5xl { font-size: 2.25rem !important; line-height: 1.05 !important; }

  /* Topbar gap collapse — prevents header overflow */
  header .gap-6 { gap: 0.5rem !important; }
  header .gap-8 { gap: 0.5rem !important; }

  /* Progress rail in create-tunnel — hide on small screens, show as progress text */
  .vtx-progress-rail { display: none !important; }

  /* Feature grid inner cols — 3-col inner bento in features.html */
  .grid.grid-cols-3:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]) {
    grid-template-columns: 1fr !important;
  }

  /* Admin billing hero sparkline moves below header text */
  #chart-billing-spark { width: 100% !important; }

  /* Notification drawer fills more of viewport on mobile */
  .vtx-notif-drawer { width: 100vw !important; max-width: 100vw !important; right: -100vw; }
  .vtx-notif-drawer.visible { right: 0; }

  /* Detail panel full width */
  .vtx-detail-panel { width: 100vw !important; max-width: 100vw !important; }

  /* CTA section padding */
  .px-10 { padding-left: 1rem !important; padding-right: 1rem !important; }
  section .px-10.py-10, article .px-10.py-10 { padding: 1.25rem !important; }

  /* Brand sub text hide on tight screens */
  .vtx-brand__sub { display: none; }

  /* Form controls: always full width */
  .vtx-input { width: 100% !important; box-sizing: border-box; }

  /* Buttons in hero flex — allow wrapping */
  .hero-cta { flex-direction: column !important; }
}

/* ── 639px breakpoint (below sm:) ───────────────────────────────────────── */
@media (max-width: 639px) {

  /* Collapsed grids — any grid-cols-3 without responsive prefix */
  /* Public pricing page plan cards */
  #tiers { grid-template-columns: 1fr !important; }
  /* Public pricing featured card transform cancel on mobile */
  .vtx-spotlight { height: auto !important; transform: none !important; }

  /* Admin index quick-access 8-col → 2-col */
  .grid.grid-cols-2.sm\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats strips: 4-col → 2-col (already uses grid-cols-2 for md) — keep for 2-col */
  /* Most KPI strips already use grid-cols-2 lg:grid-cols-4 — fine */

  /* Public nav secondary links */
  .vtx-public-nav .nav-secondary { display: none !important; }

  /* Footer grid collapse */
  footer .grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
  footer .grid-cols-3 { grid-template-columns: 1fr !important; }

  /* Tables: force horizontal scroll wrapper behavior even without .vtx-table-wrap */
  .overflow-x-auto > table,
  section > table,
  article > table,
  div > table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Admin page main padding compress */
  main.px-6.md\:px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .mx-auto.max-w-\[92rem\] { padding-left: 1rem !important; padding-right: 1rem !important; }
  .mx-auto.max-w-\[1280px\] { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Wizard progress rail (create-tunnel) — hide on mobile */
  ol.hidden.md\:flex { display: none !important; }

  /* Log/filter rows: allow wrap */
  .flex.gap-3.flex-wrap { gap: 0.5rem !important; }
  .flex.items-center.gap-3 > select,
  .flex.items-center.gap-4 > select { min-width: 0 !important; flex: 1 1 auto !important; }

  /* Buttons full-width in modal footers */
  form .flex.gap-3.justify-end { flex-direction: column !important; }
  form .flex.gap-3.justify-end > button { width: 100% !important; }

  /* On-call rotation action buttons wrap */
  .flex.flex-wrap.gap-3 > .vtx-btn { flex: 1 1 calc(50% - 0.375rem); min-width: 0; }

  /* Revenue sparkline in billing page */
  .flex-shrink-0 > #chart-billing-spark { max-width: 140px !important; }

  /* Stats banner flex items wrap on mobile (index.html wide banner) */
  .flex.flex-wrap.items-center.justify-between.gap-6 { justify-content: flex-start !important; }

  /* Top regions grid inside metrics — make narrower columns wrap */
  .grid.grid-cols-\[60px_1fr_100px_40px\] {
    grid-template-columns: 48px 1fr 70px 32px !important;
    gap: 0.35rem !important;
  }

  /* Undo toast min-width compress */
  .vtx-undo-toast { min-width: min(280px, calc(100vw - 2rem)) !important; }

  /* Fixed items stack order: bell/notif at top-right, cmdk below, toast at bottom-center — fine as-is */
}

/* ── 480px and below ────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Tap targets: ensure minimum 40px height on interactive elements */
  .vtx-btn { min-height: 40px; }
  button:not(.material-symbols-outlined):not([class*="p-1"]) { min-height: 36px; }

  /* Icon-only buttons: add min padding */
  button.material-symbols-outlined,
  .material-symbols-outlined[role="button"] { padding: 0.5rem !important; min-height: 40px; min-width: 40px; }

  /* Serif heading scale: tightest screens */
  .serif.text-5xl, .serif.text-6xl,
  .serif.text-7xl, .serif.text-8xl { font-size: 1.875rem !important; line-height: 1.1 !important; }
  .font-headline.text-4xl, .font-headline.text-5xl,
  .font-headline.text-6xl { font-size: 1.875rem !important; line-height: 1.05 !important; }

  /* Pricing page cards full-width */
  .vtx-spotlight, .vtx-card.p-10 { padding: 1.25rem !important; }

  /* CTA hero stacking */
  .flex.gap-4.flex-wrap > .vtx-btn,
  .flex.gap-6.flex-wrap > .vtx-btn,
  .flex.flex-wrap.gap-4 > .vtx-btn { width: 100% !important; justify-content: center !important; text-align: center !important; }

  /* Form submit buttons: full-width */
  form button[type="submit"] { width: 100% !important; }

  /* KPI figures: smaller on tiny screens */
  .serif.text-4xl { font-size: 1.75rem !important; }
  .serif.text-3xl { font-size: 1.5rem !important; }

  /* Filter bar in admin pages: stack vertically */
  .flex.items-center.gap-3.flex-wrap { flex-direction: column !important; align-items: stretch !important; }
  .flex.items-center.gap-3.flex-wrap > * { width: 100% !important; min-width: 0 !important; }

  /* Billing hero stats chips: wrap tightly */
  .flex.flex-wrap.items-center.gap-4.text-sm { gap: 0.4rem !important; }
  .flex.flex-wrap.items-center.gap-4.text-sm > span { font-size: 0.65rem !important; padding: 0.2rem 0.5rem !important; }

  /* OS picker in create-tunnel: 3-col → 3-col (already set) — reduce padding */
  #os-picker button { padding: 0.5rem 0.25rem !important; }
}

/* ── Safe-area insets for iOS notch/home indicator ──────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .vtx-undo-stack { bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }
  .vtx-bulk-bar   { bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }
  body > footer   { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important; }
}

/* ── Fixed-position stacking: ensure no overlap at 375px ───────────────── */
/* Bell (top-right in user dash) is in normal flow, not fixed — fine.
   Admin shell bell: top-right fixed at z-index ~50.
   Notification drawer: z-90, slides from right.
   Detail panel: z-92, slides from right.
   cmdk dialog: fixed centered, z-index 95+ (from vtx-cmdk-wrap).
   Undo stack: bottom-center z-95.
   These don't collide as long as only one panel is open at a time. */
@media (max-width: 480px) {
  /* cmdk dialog: ensure it doesn't overflow */
  .vtx-cmdk-wrap { padding: 0.5rem !important; align-items: flex-start !important; padding-top: 3rem !important; }
  .vtx-cmdk-dialog { max-height: 80vh !important; }
}
html.dark .vtx-undo-toast { background: var(--vtx-container-high, #2f3128); }