/* ===== VRL Docs UI (namespaced) ===== */
.vrl-docs {
  --brand:#c1992f;
  --brand-2:#1f2937;
  --text:#111827;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
  --ring:rgba(193,153,47,.35);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(193,153,47,.08), transparent 60%),
    radial-gradient(1000px 700px at 120% 10%, rgba(193,153,47,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.5;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

@media (prefers-color-scheme: dark){
  .vrl-docs{
    --bg:#0b0f14;
    --card:#0f141b;
    --text:#e5e7eb;
    --brand-2:#e5e7eb;
    --muted:#94a3b8;
  }
}

/* Layout base */
.vrl-docs .wrap{ min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; }
.vrl-docs header{
  position:sticky; top:0; z-index:10;
  -webkit-backdrop-filter:saturate(1.2) blur(6px);
  backdrop-filter:saturate(1.2) blur(6px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--brand) 25%, transparent);
}
.vrl-docs .container{ width:min(100%, 980px); margin-inline:auto; padding:16px 20px; }
.vrl-docs .brandline{ display:flex; gap:14px; align-items:center; justify-content:space-between; }
.vrl-docs .logo{ font-weight:800; letter-spacing:.2px; color:var(--brand-2); }
.vrl-docs .logo em{ color:var(--brand); font-style:normal; }

.vrl-docs main{ padding:28px 20px 90px; }
.vrl-docs .hero{ width:min(100%, 980px); margin-inline:auto; text-align:center; }
.vrl-docs .hero h1{ margin:0 0 8px; font-size: clamp(1.25rem, 2.4vw + .8rem, 2.2rem); color:var(--brand-2); }
.vrl-docs .hero p{ margin:0; color:var(--muted); font-size: clamp(.9rem, .6vw + .8rem, 1.05rem); }

/* Cards */
.vrl-docs .grid{
  width:min(100%, 980px);
  margin:24px auto 0;
  display:grid; gap:14px;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
}
.vrl-docs .card{
  background:var(--card);
  border:1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  border-radius:16px; padding:14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04);
  display:flex; align-items:center; gap:12px; min-height:72px; position:relative; isolation:isolate; overflow:hidden;
  transition: transform .18s ease;
}
.vrl-docs .card::after{
  content:""; position:absolute; inset:auto -20% 0 -20%; height:3px;
  background:linear-gradient(90deg, transparent, var(--brand), transparent); opacity:.5;
}
.vrl-docs .card:hover{ transform: translateY(-1px); }
.vrl-docs .card:focus-within{ outline:none; box-shadow: 0 0 0 4px var(--ring); }

/* Botão do documento */
.vrl-docs .btn-doc{ all:unset; cursor:pointer; display:flex; align-items:center; gap:12px; width:100%; }
.vrl-docs .btn-doc .icon{ flex:0 0 40px; height:40px; border-radius:10px; display:grid; place-items:center;
  border:1px solid color-mix(in oklab, var(--brand) 30%, transparent);
}
.vrl-docs .btn-doc .icon svg{ width:22px; height:22px; }
.vrl-docs .btn-doc .meta{ display:grid; gap:2px; text-align:left; }
.vrl-docs .btn-doc .title{ font-weight:700; }
.vrl-docs .btn-doc .hint{ color:var(--muted); font-size:.9em; }

@media (max-width:560px){
  .vrl-docs .btn-doc .title{ font-weight:600; }
  .vrl-docs .btn-doc .hint{ display:none; }
}

/* Viewer */
.vrl-docs .viewer{
  width:min(100%, 980px); margin:26px auto 0; border-radius:16px; overflow:hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 16px 48px rgba(0,0,0,.05);
  border:1px solid color-mix(in oklab, var(--brand) 18%, transparent);
}
.vrl-docs .viewer iframe{ width:100%; height: min(70vh, 820px); border:0; background:#000; }

/* Footer */
.vrl-docs footer{
  position:sticky; bottom:0;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-top:1px solid color-mix(in oklab, var(--brand) 25%, transparent);
}
.vrl-docs .foot{
  width:min(100%, 980px); margin-inline:auto; padding:14px 20px;
  display:flex; gap:10px; align-items:center; justify-content:space-between; font-size:.95rem;
}
.vrl-docs .credit{ color:var(--muted); }

/* Botão abrir numa nova aba */
.vrl-docs .open{
  text-decoration:none; color:inherit;
  border:1px solid color-mix(in oklab, var(--brand) 25%, transparent);
  padding:.5rem .75rem; border-radius:999px;
}
.vrl-docs .open:hover{ background:color-mix(in oklab, var(--brand) 12%, transparent); }