/* =========================================================================
   Tooq doc components — reusable building blocks for content pages.
   Everything is scoped under `.tq`. Wrap page content in <div class="tq">.
   Loaded globally so any page can use the classes without inline <style>.
   ========================================================================= */

.tq {
  --tq-surface:#12141b; --tq-surface2:#171a24; --tq-raised:#1c2130;
  --tq-border:#272d3a; --tq-border2:#343c4e;
  --tq-text:#e9ecf3; --tq-muted:#99a1b3; --tq-faint:#6a7283;
  --tq-accent:#5286d4; --tq-accent-bright:#7099e0;
  --tq-accent-soft:rgba(82,134,212,.14); --tq-accent-line:rgba(82,134,212,.34);
  --tq-get:#34b98a; --tq-post:#6f9be8; --tq-del:#e5544b;
  --tq-code:#0a0c12;
  --tq-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  max-width:none; color:var(--tq-muted);
}
/* Light theme (lofi) — same components, light surfaces + readable text */
[data-theme="lofi"] .tq {
  --tq-surface:#f7f8fa; --tq-surface2:#eef1f5; --tq-raised:#e6eaf0;
  --tq-border:#e4e8ee; --tq-border2:#d3d9e2;
  --tq-text:#1b2029; --tq-muted:#586274; --tq-faint:#8b94a4;
  --tq-accent:#2f6fd6; --tq-accent-bright:#2559b4;
  --tq-accent-soft:rgba(47,111,214,.10); --tq-accent-line:rgba(47,111,214,.28);
  --tq-code:#eef1f5;
}
.tq * { box-sizing:border-box; }

/* Lead / section scaffolding */
.tq .lead { font-size:1.1rem; line-height:1.68; color:var(--tq-muted); max-width:66ch; margin:0 0 8px; }
.tq .lead strong { color:var(--tq-text); font-weight:600; }
.tq .eyebrow { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--tq-accent); margin:0 0 10px; }
.tq h2.sec { font-size:1.36rem; font-weight:640; letter-spacing:-.015em; color:var(--tq-text); margin:0 0 6px; border:0; padding:0; }
.tq .sec-intro { font-size:1rem; color:var(--tq-muted); margin:0 0 20px; max-width:62ch; }
.tq section.block { margin-top:54px; }

/* Fact strip */
.tq .facts { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tq .fact { background:linear-gradient(180deg,var(--tq-surface2),var(--tq-surface)); border:1px solid var(--tq-border); border-radius:10px; padding:16px; }
.tq .fact .k { font-family:var(--tq-mono); font-size:1.35rem; font-weight:600; color:var(--tq-text); letter-spacing:-.02em; }
.tq .fact .l { color:var(--tq-muted); font-size:13.5px; margin-top:4px; line-height:1.45; }

/* Numbered stepper */
.tq .flow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.tq .flow-2 { grid-template-columns:repeat(2,1fr); }
.tq .step { position:relative; padding:0 16px; }
.tq .step:first-child { padding-left:0; }
.tq .step:not(:last-child)::after { content:""; position:absolute; top:15px; right:8px; left:calc(50% + 22px); height:1px; background:linear-gradient(90deg,var(--tq-accent-line),var(--tq-border)); }
.tq .step .num { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:var(--tq-mono); font-weight:600; font-size:14px; color:var(--tq-accent-bright); background:var(--tq-accent-soft); border:1px solid var(--tq-accent-line); }
.tq .step h4 { margin:12px 0 4px; font-size:14.5px; font-weight:600; color:var(--tq-text); }
.tq .step p { margin:0; color:var(--tq-muted); font-size:13.3px; line-height:1.5; }

/* Concept cards */
.tq .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tq .card { position:relative; background:var(--tq-surface); border:1px solid var(--tq-border); border-radius:11px; padding:16px; transition:border-color .16s,transform .16s,background .16s; }
.tq .card:hover { border-color:var(--tq-border2); background:var(--tq-surface2); transform:translateY(-2px); }
.tq .card .ic { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--tq-raised); border:1px solid var(--tq-border2); color:var(--tq-accent-bright); margin-bottom:11px; }
.tq .card h4 { margin:0 0 6px; font-size:15.5px; font-weight:600; color:var(--tq-text); }
.tq .card p { margin:0; color:var(--tq-muted); font-size:14px; line-height:1.55; }
.tq .cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }

/* "Start here" / product nav cards */
.tq .starts { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tq .start { display:flex; flex-direction:column; gap:8px; background:var(--tq-surface); border:1px solid var(--tq-border); border-radius:11px; padding:18px 16px; transition:border-color .16s,background .16s; text-decoration:none; }
.tq .start:hover { border-color:var(--tq-accent-line); background:var(--tq-surface2); }
.tq .start .top { display:flex; align-items:center; justify-content:space-between; }
.tq .start h4 { margin:0; font-size:15px; font-weight:620; color:var(--tq-text); }
.tq .start p { margin:0; color:var(--tq-muted); font-size:13px; line-height:1.5; }
.tq .start .arrow { color:var(--tq-faint); transition:transform .16s,color .16s; }
.tq .start:hover .arrow { color:var(--tq-accent-bright); transform:translateX(3px); }

/* API preview / endpoints / permission matrix */
.tq .preview { background:var(--tq-surface); border:1px solid var(--tq-border); border-radius:12px; overflow:hidden; }
.tq .preview-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--tq-border); background:var(--tq-surface2); font-size:12px; color:var(--tq-faint); font-family:var(--tq-mono); }
.tq .preview-head .d { width:10px; height:10px; border-radius:50%; background:var(--tq-border2); }
.tq .preview-body { padding:18px; display:flex; flex-direction:column; gap:20px; }
.tq .ep-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tq-faint); margin-bottom:9px; }
.tq .endpoint { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--tq-code); border:1px solid var(--tq-border); border-radius:9px; }
.tq .endpoint + .endpoint { margin-top:8px; }
.tq .verb { font-family:var(--tq-mono); font-weight:700; font-size:11.5px; letter-spacing:.03em; padding:4px 9px; border-radius:6px; min-width:58px; text-align:center; }
.tq .verb.get { color:var(--tq-get); background:rgba(52,185,138,.12); border:1px solid rgba(52,185,138,.3); }
.tq .verb.post { color:var(--tq-post); background:rgba(79,140,240,.12); border:1px solid rgba(79,140,240,.3); }
.tq .verb.del { color:var(--tq-del); background:rgba(229,84,75,.12); border:1px solid rgba(229,84,75,.3); }
.tq .verb.put { color:#d9822b; background:rgba(217,130,43,.12); border:1px solid rgba(217,130,43,.32); }
.tq .path { font-family:var(--tq-mono); font-size:13px; color:var(--tq-text); }
.tq .path .var { color:var(--tq-accent-bright); }
.tq .ep-desc { margin-left:auto; color:var(--tq-faint); font-size:12.5px; }
.tq .ep-meta { font-size:12.5px; color:var(--tq-faint); margin:2px 0 12px; }
.tq .ep-meta strong { color:var(--tq-muted); font-weight:600; }
.tq .matrix-wrap { overflow-x:auto; }
.tq table.matrix { border-collapse:collapse; width:100%; font-size:13px; margin:0; }
.tq table.matrix th, .tq table.matrix td { padding:9px 12px; text-align:center; border-bottom:1px solid var(--tq-border); }
.tq table.matrix thead th { color:var(--tq-muted); font-weight:600; font-size:12px; }
.tq table.matrix th.role { text-align:left; color:var(--tq-text); font-family:var(--tq-mono); font-weight:600; }
.tq table.matrix tbody tr { transition:background .14s; }
.tq table.matrix tbody tr:hover { background:var(--tq-accent-soft); }
.tq .yes { color:var(--tq-accent); }
.tq .no { color:var(--tq-faint); opacity:.55; }
.tq .cap { color:var(--tq-faint); font-size:12px; margin-top:12px; }

/* Home / product hub */
.tq .hub-hero { padding:8px 0 4px; }
.tq .hub-kicker { font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--tq-accent); margin:0 0 12px; }
.tq h1.hub-title { font-size:2.4rem; line-height:1.1; font-weight:700; letter-spacing:-.03em; color:var(--tq-text); margin:0; text-wrap:balance; }
.tq .hub-sub { font-size:1.05rem; line-height:1.6; color:var(--tq-muted); max-width:60ch; margin:14px 0 0; }
.tq .products { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.tq .product { display:flex; flex-direction:column; background:var(--tq-surface); border:1px solid var(--tq-border); border-radius:14px; padding:22px; transition:border-color .18s,background .18s,transform .18s; text-decoration:none; }
.tq .product:hover { border-color:var(--tq-accent-line); background:var(--tq-surface2); transform:translateY(-3px); }
.tq .product .badge { align-self:flex-start; font-family:var(--tq-mono); font-size:11px; letter-spacing:.04em; color:var(--tq-accent-bright); background:var(--tq-accent-soft); border:1px solid var(--tq-accent-line); border-radius:999px; padding:3px 10px; margin-bottom:14px; }
.tq .product h3 { margin:0 0 8px; font-size:1.15rem; font-weight:650; color:var(--tq-text); letter-spacing:-.01em; }
.tq .product p { margin:0 0 16px; color:var(--tq-muted); font-size:13.5px; line-height:1.55; flex-grow:1; }
.tq .product .go { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--tq-accent-bright); }
.tq .product .go svg { transition:transform .18s; }
.tq .product:hover .go svg { transform:translateX(3px); }
.tq .hub-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.tq .hub-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--tq-muted); background:var(--tq-surface); border:1px solid var(--tq-border); border-radius:8px; padding:8px 12px; text-decoration:none; transition:border-color .16s,color .16s; }
.tq .hub-link:hover { color:var(--tq-text); border-color:var(--tq-border2); }

.badge-soon { display: inline-block; font-size: 11px; letter-spacing: .03em; font-weight: 500; color: #d9822b; background: rgba(217,130,43,.13); border: 1px solid rgba(217,130,43,.44); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.tq .card .badge-soon { position: absolute; top: 12px; right: 12px; margin: 0; }

/* Conformidade status seal — goes at the very top of a compliance page */
.tq-conf { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 500; margin: 2px 0 20px; border: 1px solid; }
.tq-conf .tq-conf-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tq-conf b { font-weight: 700; }
.tq-conf-completa { color: #35a870; background: rgba(52,185,138,.10); border-color: rgba(52,185,138,.36); }
.tq-conf-completa .tq-conf-dot { background: #34b98a; }
.tq-conf-parcial { color: #d9822b; background: rgba(217,130,43,.10); border-color: rgba(217,130,43,.40); }
.tq-conf-parcial .tq-conf-dot { background: #d9822b; }
.tq-conf-construcao { color: #5b93d6; background: rgba(82,134,212,.10); border-color: rgba(82,134,212,.36); }
.tq-conf-construcao .tq-conf-dot { background: #5286d4; }
.tq-conf-sm { padding: 4px 10px; font-size: 12px; }
.tq-conf-legend { display: flex; flex-direction: column; gap: 11px; margin: 2px 0 8px; }
.tq-conf-legend > .row { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.tq-conf-legend .tq-conf { margin: 0; flex: 0 0 auto; }
.tq-conf-legend .tq-conf-txt { font-size: 14px; color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }

/* Callout / note (for prose content pages) */
.tq-note { display: flex; gap: 11px; padding: 13px 15px; border: 1px solid var(--tq-border); border-left: 3px solid var(--tq-accent); border-radius: 8px; background: var(--tq-surface); margin: 4px 0; }
.tq-note > svg { color: var(--tq-accent-bright); flex: 0 0 auto; margin-top: 2px; }
.tq-note .tq-note-body { color: color-mix(in oklch, var(--tq-text) 80%, transparent); font-size: 15px; line-height: 1.66; }
.tq-note .tq-note-body strong { color: var(--tq-text); font-weight: 600; }

/* Curve figures (strategy concept diagrams) */
.tq-fig { background:var(--tq-surface); border:1px solid var(--tq-border); border-radius:11px; padding:16px 18px 13px; margin:6px 0; max-width:440px; }
.tq-fig svg { display:block; width:100%; height:auto; }
.tq-fig figcaption { color:var(--tq-faint); font-size:12.5px; line-height:1.5; margin-top:10px; }
.tq-fig .cv-axis { stroke:var(--tq-border2); stroke-width:1; }
.tq-fig .cv-ref { fill:none; stroke:var(--tq-muted); stroke-width:1.6; opacity:.38; }
.tq-fig .cv-seg { fill:none; stroke:var(--tq-accent); stroke-width:2.6; stroke-linecap:round; }
.tq-fig .cv-guide { fill:none; stroke:var(--tq-accent-line); stroke-width:1.3; stroke-dasharray:3.5 3.5; }
.tq-fig .cv-node { fill:var(--tq-surface); stroke:var(--tq-muted); stroke-width:1.6; }
.tq-fig .cv-node.hl { fill:var(--tq-accent); stroke:var(--tq-accent-bright); }
.tq-fig .cv-lbl { fill:var(--tq-faint); font-family:var(--tq-mono); font-size:10.5px; }
.tq-fig .cv-tag { fill:var(--tq-accent-bright); font-family:system-ui,sans-serif; font-size:11px; font-weight:600; }
.tq-fig .cv-dash { stroke:var(--tq-faint); stroke-width:1; stroke-dasharray:2.5 3; opacity:.7; fill:none; }
.tq-fig .cv-brk { stroke:var(--tq-accent-bright); stroke-width:1.4; fill:none; }
.tq-fig .cv-band { fill:var(--tq-accent-soft); stroke:var(--tq-accent-line); stroke-width:1; }
.tq-fig .cv-fwd { stroke:var(--tq-accent); stroke-width:2.4; stroke-linecap:round; fill:none; }
.tq-fig .cv-arrow { fill:var(--tq-accent); }
.tq-fig .cv-axttl { fill:var(--tq-faint); font-family:var(--tq-mono); font-size:9.5px; }
.tq-fig figcaption strong { color:var(--tq-muted); font-weight:600; }

/* Home hero (centered) + buttons */
.tq-home { max-width: 940px; margin: 0 auto; box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
.tq-hero { text-align: center; padding: 48px 0 8px; }
.tq-hero h1 { font-size: 2.8rem; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; color: var(--tq-text); margin: 0; text-wrap: balance; }
.tq-hero p { font-size: 1.08rem; color: var(--tq-muted); max-width: 52ch; margin: 16px auto 0; line-height: 1.6; }
.tq-cta { margin-top: 26px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tq-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 9px; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .15s, background .15s, border-color .15s, color .15s; }
.tq-btn svg { transition: transform .15s; }
.tq-btn:hover svg { transform: translateX(3px); }
.tq-btn-primary { background: var(--tq-accent); color: #ffffff; border: 1px solid var(--tq-accent); }
.tq-btn-primary:hover { background: var(--tq-accent-bright); transform: translateY(-1px); }
.tq-btn-ghost { background: transparent; color: var(--tq-text); border: 1px solid var(--tq-border2); }
.tq-btn-ghost:hover { border-color: var(--tq-accent-line); color: var(--tq-accent-bright); }
.tq-home .products { margin-top: 40px; }
.tq-home-label { text-align: center; margin: 0 0 16px; }

/* Responsive */
@media (max-width:820px){
  .tq .facts,.tq .cards,.tq .cards-2,.tq .starts,.tq .products,.tq .flow-2{ grid-template-columns:1fr; }
  .tq .flow{ grid-template-columns:1fr 1fr; gap:18px 14px; }
  .tq .flow .step{ padding-left:0; padding-right:0; }
  .tq .step:not(:last-child)::after{ display:none; }
  .tq h1.hub-title{ font-size:1.9rem; }
}
@media (prefers-reduced-motion:reduce){ .tq *{ transition:none !important; } }