/* F2F Visualizer — ui-ux-pro-max Developer Tool / IDE
   Dark Mode (OLED) + Minimalism & Swiss Style, density 8.
   Tokens: slate night surfaces, run green #22C55E, blue focus.
   FAQ landing pattern was off-topic and is not applied. */

:root {
  --bg: #070a10;
  --panel: #10151e;
  --editor: #0c121c;
  --raised: #141b28;
  --card: #162033;
  --card-2: #1b2336;
  --line: #556580;
  --fg: #f8fafc;
  --body: #e2e8f0;
  --muted: #94a3b8;
  --accent: #22c55e;
  --on-accent: #0f172a;
  --focus: #7dd3fc;
  color-scheme: dark;
}

html,
body {
  background: var(--bg);
  color: var(--body);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.font-mono,
.whitespace-pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Readable floor: the snapshot uses 10–11px labels. */
.text-\[10px\],
.text-\[11px\] {
  font-size: 12px;
  line-height: 1.4;
}

.bg-\[\#09090b\] {
  background-color: var(--bg);
  color: var(--body);
}
.bg-\[\#0c0c0e\] {
  background-color: var(--panel);
}
.bg-\[\#0d0d0d\] {
  background-color: var(--editor);
}
.bg-\[\#111\] {
  background-color: var(--raised);
}
.bg-black {
  background-color: var(--bg);
}
.bg-zinc-900 {
  background-color: var(--card);
}
.bg-zinc-900\/70 {
  background-color: #162033d4;
}
.bg-zinc-800 {
  background-color: var(--card-2);
}
.border-zinc-800,
.border-zinc-700 {
  border-color: var(--line);
}

.bg-\[\#09090b\] .text-zinc-500,
.bg-\[\#0c0c0e\] .text-zinc-500,
.bg-\[\#0d0d0d\] .text-zinc-500,
.bg-black .text-zinc-500,
.bg-\[\#09090b\] .text-zinc-600,
.bg-black .text-zinc-600 {
  color: var(--muted);
}
.bg-white .text-zinc-500,
.bg-slate-50 .text-zinc-500,
.bg-zinc-100 .text-zinc-500 {
  color: #475569;
}

.bg-\[\#111\] .text-zinc-400 {
  color: #cbd5e1;
}
span.w-8.text-zinc-700 {
  color: var(--muted);
}
.whitespace-pre.text-zinc-400 {
  color: var(--body);
}
.whitespace-pre.text-blue-50 {
  color: var(--fg);
}

.font-mono.text-xs.leading-6 {
  font-size: 13px;
  line-height: 1.65;
}

header.h-12 {
  height: calc(3.25rem + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-inline: 1rem;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-color: var(--panel);
}

header > div.rounded {
  width: auto;
  min-width: 2.75rem;
  height: 1.75rem;
  padding-inline: 0.45rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}

button,
[role="tab"] {
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.12s ease;
}
button:active,
[role="tab"]:active {
  opacity: 0.82;
}

nav[aria-label="Trace views"] button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
nav[aria-label="Trace views"] button[aria-pressed="true"] {
  background: var(--card-2);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

button.w-full.font-mono.bg-zinc-800 {
  background: var(--card-2);
  color: var(--fg);
  box-shadow: inset 3px 0 0 var(--accent);
}

[role="tab"] {
  min-height: 32px;
}
button[role="tab"][aria-selected="true"] {
  color: var(--fg);
}
button[role="tab"][aria-selected="true"].border-b-2 {
  border-bottom-color: var(--accent);
}

[data-active="true"] {
  background: #172554;
  box-shadow: inset 3px 0 0 var(--focus);
}

.tok-kw { color: #7dd3fc; }
.tok-str { color: #fdba74; }
.tok-com { color: #86efac; }
.tok-num { color: #c4b5fd; }
[data-active="true"] .tok-kw { color: #bae6fd; }
[data-active="true"] .tok-str { color: #fed7aa; }
[data-active="true"] .tok-com { color: #bbf7d0; }

/* Keep the sideways path; show that it continues. */
p + .overflow-x-auto {
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 36px), transparent);
}
p + .overflow-x-auto .w-32 {
  scroll-snap-align: start;
}

.bg-zinc-900\/70 .border-dashed {
  border-color: #7c8ba3;
  color: #cbd5e1;
}

#mock-pay-btn {
  background: var(--accent);
  color: var(--on-accent);
  min-height: 44px;
}
#mock-pay-btn:hover {
  background: #4ade80;
}
#mock-add-btn-1,
#mock-add-btn-2,
#mock-cart-total {
  min-height: 36px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 50;
  transform: translateY(-150%);
  border-radius: 6px;
  background: var(--focus);
  color: var(--on-accent);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}
.skip-link:focus {
  transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#root {
  animation: shell-in 0.28s ease;
}
@keyframes shell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 767px), (pointer: coarse) {
  button,
  [role="tab"] {
    min-height: 44px;
  }
  #mock-add-btn-1,
  #mock-add-btn-2,
  #mock-cart-total {
    min-height: 44px;
  }
  .flex.h-full.flex-col {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  #root { animation: none; }
  button,
  [role="tab"] {
    transition: none;
  }
}