@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500&family=Instrument+Sans:wght@400;500;600&display=swap");

:root { --vr-ease: cubic-bezier(.2, .8, .2, 1); }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.vr-stage { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; padding: var(--space-6); }
.vr-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.vr-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.vr-caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .01em; color: var(--ink-muted); }
.vr-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:where(.vr-btn, .vr-seg button, .vr-field input, .vr-card-link):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button — pílulas */
.vr-btn { font: inherit; font-size: 15px; font-weight: 500; min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 0; background: var(--surface-sunken); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: transform 140ms var(--vr-ease), background-color 140ms var(--vr-ease), filter 140ms var(--vr-ease); }
.vr-btn:hover { filter: brightness(0.97); }
.vr-btn:active { transform: scale(.97); }
.vr-btn-primary { background: var(--earth); color: var(--on-earth); }
.vr-btn-primary:hover { filter: brightness(1.08); }
.vr-btn-ghost { background: transparent; color: var(--ink-muted); }
.vr-btn-ghost:hover { background: var(--surface-sunken); color: var(--ink); filter: none; }
.vr-btn-sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.vr-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* CloneMarker — avatar circular com selo numerado ao lado */
.vr-clone { position: relative; display: inline-flex; flex: none; border-radius: var(--radius-pill); }
.vr-clone-disc { display: block; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-sunken); color: var(--ink-muted); box-shadow: inset 0 0 0 1.5px var(--outline); }
.vr-clone-disc svg { display: block; width: 100%; height: 100%; }
.vr-clone-origin .vr-clone-disc { background: var(--ink); color: var(--surface-raised); box-shadow: none; }
.vr-clone-unobserved .vr-clone-disc { background: transparent; color: var(--ink-faint); box-shadow: none; outline: 1.5px dashed var(--outline); outline-offset: -1.5px; }
.vr-clone-badge { position: absolute; right: -6px; bottom: -4px; min-width: 22px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); box-shadow: 0 0 0 2px var(--surface), var(--shadow-1); font-family: var(--font-mono); font-size: 11px; line-height: 18px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.vr-clone-origin .vr-clone-badge { background: var(--ink); color: var(--surface-raised); }
.vr-clone-selected .vr-clone-badge { background: var(--earth); color: var(--on-earth); }
.vr-clone-unobserved .vr-clone-badge { color: var(--ink-faint); }
.vr-clone-sm .vr-clone-disc { width: 28px; height: 28px; }
.vr-clone-sm .vr-clone-badge { right: -8px; bottom: -6px; transform: scale(.85); }
.vr-clone-md .vr-clone-disc { width: 44px; height: 44px; }
.vr-clone-lg .vr-clone-disc { width: 88px; height: 88px; }
.vr-clone-lg .vr-clone-badge { right: -4px; bottom: 2px; min-width: 32px; height: 24px; font-size: 14px; line-height: 24px; padding: 0 8px; }
@media (prefers-reduced-motion: no-preference) {
  .vr-clone-scan .vr-clone-disc { animation: vr-scan 420ms var(--vr-ease) both; }
  @keyframes vr-scan { from { clip-path: inset(0 0 100% 0 round 999px); opacity: .4; } to { clip-path: inset(0 0 0 0 round 999px); opacity: 1; } }
}

/* CloneStack — clones sobrepostos */
.vr-stack-clones { display: inline-flex; align-items: center; }
.vr-stack-clones > .vr-clone + .vr-clone { margin-left: -10px; }
.vr-stack-clones > .vr-clone .vr-clone-disc { box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 1.5px var(--outline); }
.vr-stack-clones > .vr-clone-origin .vr-clone-disc { box-shadow: 0 0 0 3px var(--surface); }
.vr-stack-clones .vr-clone-badge { display: none; }
.vr-stack-label { margin-left: var(--space-3); }

/* LayerTag — chips com glifo de forma */
.vr-layer { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; background: var(--surface-sunken); color: var(--ink); }
.vr-layer::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; box-sizing: border-box; }
.vr-layer-reported::before { background: var(--ink); }
.vr-layer-confirmed::before { content: "✓"; width: auto; height: auto; font-size: 11px; line-height: 1; }
.vr-layer-inferred { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--outline); }
.vr-layer-inferred::before { border: 1.5px dashed var(--ink-muted); }
.vr-layer-assumption { background: var(--earth-soft); color: var(--earth); }
.vr-layer-assumption::before { background: var(--earth); }
.vr-layer-simulated { background: transparent; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--outline); font-family: var(--font-mono); font-weight: 400; }
.vr-layer-simulated::before { border: 1.5px dotted var(--ink-faint); }
.vr-layer-unknown { color: var(--ink-muted); }
.vr-layer-unknown::before { content: "?"; width: auto; height: auto; font-size: 11px; line-height: 1; font-weight: 600; }
.vr-layer-declined { background: transparent; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--outline); }
.vr-layer-declined::before { width: 9px; height: 1.5px; border-radius: 0; background: var(--ink-faint); transform: rotate(-45deg); }

/* Card base */
.vr-card { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.vr-card-interactive { transition: box-shadow 220ms var(--vr-ease), transform 220ms var(--vr-ease); }
.vr-card-interactive:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Chips de metadado */
.vr-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* VariantCard */
.vr-variant { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); box-sizing: border-box; }
.vr-variant-head { display: flex; gap: var(--space-4); align-items: center; }
.vr-variant-head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vr-variant-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.vr-variant-summary { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.vr-variant-sec { display: flex; flex-direction: column; gap: 6px; }
.vr-variant-sec h4 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.vr-variant-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.vr-variant-sec li { display: flex; gap: var(--space-2); }
.vr-variant-sec li::before { content: ""; width: 4px; height: 4px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--outline); flex: none; }
.vr-variant-unfav { background: var(--breach-soft); color: var(--breach); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 20px; }
.vr-variant-unfav h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.vr-variant-unfav p { margin: 0; }
.vr-variant-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vr-variant-unobserved { background: transparent; box-shadow: none; outline: 1.5px dashed var(--outline); outline-offset: -1.5px; }
.vr-variant-unobserved .vr-variant-title { color: var(--ink-muted); }

/* Notice — vidro */
.vr-notice { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--shadow-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vr-notice strong { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--earth-soft); color: var(--earth); font-size: 12px; font-weight: 600; white-space: nowrap; }
.vr-notice strong::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--earth); }

/* Timeline */
.vr-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vr-timeline li { display: grid; grid-template-columns: 64px 16px minmax(0, 1fr); column-gap: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.vr-timeline .vr-t { font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--ink-muted); text-align: right; }
.vr-timeline .vr-rail { position: relative; }
.vr-timeline .vr-rail::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--hairline); }
.vr-timeline li:first-child .vr-rail::before { top: 6px; }
.vr-timeline li:last-child .vr-rail::before { bottom: auto; height: 6px; }
.vr-timeline .vr-rail::after { content: ""; position: absolute; left: 3px; top: 5px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1.5px dotted var(--outline); background: var(--surface); }
.vr-timeline .vr-ev { padding-bottom: var(--space-4); }

/* Lista agrupada + Milestone */
.vr-group { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; max-width: 560px; }
.vr-group > * + * { box-shadow: inset 0 1px 0 var(--hairline); }
.vr-milestone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: 14px var(--space-5); align-items: center; }
.vr-milestone-desc { font-size: 15px; line-height: 22px; font-weight: 500; min-width: 0; }
.vr-milestone-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); grid-column: 1; }
.vr-milestone-sub .vr-mono { font-size: 12px; }
.vr-status { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; white-space: nowrap; }
.vr-status-pending { background: var(--surface-sunken); color: var(--ink-muted); }
.vr-status-met { background: var(--ink); color: var(--surface-raised); }
.vr-status-partial { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.vr-status-not_met { background: var(--breach-soft); color: var(--breach); }
.vr-status-unobserved { box-shadow: inset 0 0 0 1px var(--outline); color: var(--ink-faint); }

/* MemoryItem */
.vr-memory { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.vr-memory-top { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }
.vr-memory-text { margin: 0; font-size: 16px; line-height: 24px; }
.vr-memory-inferred .vr-memory-text { color: var(--ink-muted); }
.vr-memory-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.vr-memory-closed .vr-memory-text { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--outline); }

/* Field — preenchido */
.vr-field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.vr-field label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.vr-field input { font: inherit; min-height: 48px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); }
.vr-field input::placeholder { color: var(--ink-faint); }
.vr-field-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Segmented control */
.vr-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--radius-pill); background: var(--surface-sunken); max-width: 100%; flex-wrap: wrap; }
.vr-seg button { font: inherit; font-size: 14px; font-weight: 500; min-height: 36px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); cursor: pointer; transition: background-color 220ms var(--vr-ease), color 220ms var(--vr-ease), box-shadow 220ms var(--vr-ease); }
.vr-seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1); }

/* GapQuestion */
.vr-gap { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); max-width: 520px; box-sizing: border-box; }
.vr-gap-q { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.vr-gap-why { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }