/* Value Tree diagnostics (value-tree-rgm.html, value-tree-supply.html).
   Ported from the diagnostic artifacts: same layout, re-skinned to the site (square corners,
   the site's monochrome palette, no dark mode). Everything is scoped under .sim; the colour
   tokens sit on :root because the charts read them with getComputedStyle(documentElement). */
:root{
  --bg:#FFFFFF; --tile:#F2F2F1; --tile-2:#E4E4E2; --card:#FFFFFF; --muted:#5D6166; --faint:#676B70; --amber:#3A3E42; --amber-ink:#FFFFFF; --amber-deep:#1E2124; --on-dark:#FFFFFF; --on-dark-muted:rgba(255,255,255,.66); --good:#2F7D55; --bad:#B4462A; --c-today:#C4C6C9; --c-agentic:#8A8E93; --c-full:#1E2124; --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --r:0;
}
.sim{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;padding-top:calc(96px + env(safe-area-inset-top,0px))}
.sim-wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);padding-block:20px 72px;display:flex;flex-direction:column;gap:14px}
.sim h1,.sim h2,.sim h3,.sim .num{font-family:var(--display);font-weight:500;letter-spacing:-.035em;margin:0;text-wrap:balance}
.sim .tnum{font-variant-numeric:tabular-nums}
.sim .pill{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:0;border:1px solid var(--line);font-size:12.5px;color:var(--muted);white-space:nowrap}
.sim .pill.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sim .t{background:var(--tile);border-radius:0;padding:clamp(20px,3vw,32px);min-width:0;display:flex;flex-direction:column;gap:16px}
.sim .t.sim-card{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.sim .t.amber{background:var(--amber);color:var(--amber-ink)}
.sim .t.ink{background:#141414;color:var(--on-dark)}
.sim .t.ink .lab,.sim .t.ink .p,.sim .t.ink .k{color:var(--on-dark-muted)}
.sim .t.amber .lab,.sim .t.amber .p{color:rgba(255,255,255,.72)}
.sim .lab{font-size:13px;color:var(--muted)}
.sim .p{color:var(--muted);max-width:66ch}
.sim .p b{color:var(--ink);font-weight:500}
.sim .t.ink .p b{color:var(--on-dark)}
.sim .t.amber .p b{color:var(--amber-ink)}
.sim .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sim .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sim .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sim .sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:22px}
.sim .sec-h h2{font-size:clamp(30px,4.4vw,52px);line-height:.98}
.sim .sec-h h2 .dim{color:var(--faint)}
.sim .hero{position:relative;overflow:hidden}
.sim .hero h1{font-size:clamp(34px,5.6vw,70px);line-height:.96;max-width:15ch}
.sim .hero h1 .dim{color:var(--faint)}
.sim .rings{position:absolute;right:-30px;top:-30px;width:220px;height:220px;color:var(--ink);opacity:.16}
.sim .sim-btn{appearance:none;border:0;border-radius:0;height:46px;padding:0 22px;font:500 15px/1 var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg)}
.sim .sim-btn.amber{background:var(--amber);color:var(--amber-ink)}
.sim .sim-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.sim .sim-btn:focus-visible,.sim .opt:focus-within,.sim .door:focus-visible,.sim .field input:focus-visible,.sim .field select:focus-visible,.sim .chk input:focus-visible,.sim input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sim .facts{display:flex;gap:26px;flex-wrap:wrap}
.sim .facts div{display:flex;flex-direction:column;max-width:24ch}
.sim .facts b{font:500 22px/1.1 var(--display);letter-spacing:-.03em}
.sim .facts span{font-size:12.5px;color:var(--muted)}
.sim .doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sim .door{appearance:none;text-align:left;border:0;border-radius:0;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:18px 18px 16px;cursor:pointer;display:flex;flex-direction:column;gap:8px;font:inherit;min-width:0}
.sim .door:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sim .door .who{font-size:12.5px;color:var(--muted)}
.sim .door b{font:500 18px/1.15 var(--display);letter-spacing:-.02em}
.sim .door .d{font-size:13.5px;color:var(--muted)}
.sim .door .go{margin-top:auto;font-size:13px;font-weight:500}
.sim .triggers{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted)}
.sim .tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:12.5px}
.sim .other{font-size:13.5px;color:var(--muted)}
.sim .other a{color:var(--ink);font-weight:500}
.sim .prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.sim .prog i{flex:1;height:6px;border-radius:0;background:var(--tile-2);overflow:hidden}
.sim .prog i b{display:block;height:100%;background:var(--amber);border-radius:0;transition:width .3s}
.sim .q{display:flex;flex-direction:column;gap:10px;padding-block:6px}
.sim .q h3{font-size:18.5px;letter-spacing:-.02em}
.sim .q .help{font-size:13px;color:var(--muted)}
.sim .opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sim .opts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sim .opt{position:relative;border-radius:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.sim .opt input{position:absolute;opacity:0;pointer-events:none}
.sim .opt b{font-weight:500;font-size:14.5px}
.sim .opt span{font-size:12.5px;color:var(--muted)}
.sim .opt:has(input:checked){background:var(--ink);color:var(--bg);box-shadow:none}
.sim .opt:has(input:checked) span{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.sim .row{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.sim .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sim .field label{font-size:13px;color:var(--muted)}
.sim .field input,.sim .field select{height:46px;border-radius:0;border:0;box-shadow:inset 0 0 0 1px var(--line);background:var(--card);color:var(--ink);padding:0 14px;font:400 15px var(--sans);width:100%}
.sim .rng{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.sim .rng output{font:500 18px/1 var(--display);font-variant-numeric:tabular-nums}
.sim .rng input{grid-column:1/-1;width:100%;accent-color:var(--ink)}
.sim .chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted)}
.sim .chk input{margin-top:3px;accent-color:var(--ink);width:18px;height:18px;flex:none}
.sim .err{color:var(--bad);font-size:13px}
.sim .pain.on{background:var(--amber);color:var(--amber-ink)}
.sim .pain.on .lab,.sim .pain.on .p{color:rgba(255,255,255,.72)}
.sim .ins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sim .ins li{padding:12px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:28px 1fr;gap:10px}
.sim .ins li:last-child{border-bottom:1px solid var(--line)}
.sim .t.ink .ins li{border-color:rgba(255,255,255,.14)}
.sim .ins .k{font:500 13px/1.6 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.sim .flag{display:grid;grid-template-columns:10px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.sim .flag:last-child{border-bottom:1px solid var(--line)}
.sim .flag i{width:10px;height:10px;border-radius:0;margin-top:6px}
.sim .note{font-size:12px;color:var(--faint);line-height:1.55}
.sim svg text{font-family:var(--sans)}
.sim .rep-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end}
.sim .heat{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:6px;font-size:12px;align-items:center}
.sim .heat .c{height:30px;border-radius:0;display:grid;place-items:center;font-variant-numeric:tabular-nums;font-weight:500}
.sim .heat .h{color:var(--muted);text-align:center}
.sim .phase .wk{display:inline-flex;align-self:flex-start;height:30px;padding:0 13px;border-radius:0;align-items:center;font-size:13px;font-weight:500;background:var(--ink);color:var(--bg)}
.sim .t.amber .phase .wk,.sim .phase.amber .wk{background:var(--ink);color:var(--bg)}
.sim .t.ink.phase .wk{background:var(--on-dark);color:#141414}
.sim .phase ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.sim .loop{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.sim .loop div{background:var(--card);border-radius:0;box-shadow:inset 0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sim .loop div:nth-child(3){background:var(--amber);color:var(--amber-ink);box-shadow:none}
.sim .loop div:nth-child(5),.sim .loop div:nth-child(6){background:#141414;color:var(--on-dark);box-shadow:none}
.sim .loop .k{font-size:12px;opacity:.7}
.sim .loop b{font:500 15px/1.2 var(--display);letter-spacing:-.015em}
.sim .loop span{font-size:12.5px;opacity:.75}
.sim .sim-case .tagline{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.sim .sim-case .num{font-size:clamp(30px,3.6vw,42px);line-height:1}
.sim .sim-case ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.sim .t.ink.sim-case ul{color:var(--on-dark-muted)}
.sim .t.amber.sim-case ul{color:rgba(255,255,255,.72)}
@media screen and (max-width:900px){
  .sim .doors,.sim .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sim .loop{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media screen and (max-width:640px){
  .sim .grid2,.sim .grid3,.sim .grid4,.sim .doors,.sim .opts,.sim .opts.four,.sim .loop{grid-template-columns:1fr}
  .sim .rings{display:none}
}
@media (prefers-reduced-motion: reduce){ .sim *{transition:none!important;animation:none!important} }

/* ---------- site fit ---------- */
.sim-meta{display:flex;gap:8px;flex-wrap:wrap}
.sim .sim-btn{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:background .2s,color .2s}
.sim .sim-btn:hover{background:#000}
.sim .sim-btn.ghost{box-shadow:inset 0 0 0 1px rgba(30,33,36,.38)}
.sim .sim-btn.ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.sim .sim-btn.amber:hover{background:var(--ink)}
.sim .chk a,.sim #mail-box a{text-decoration:underline;text-underline-offset:3px}
.sim-brand{font:600 15px/1 var(--display);letter-spacing:-.02em;margin:0 0 8px}
/* the app scrolls each step into view; keep it clear of the fixed site header */
.sim #s-steps,.sim #s-result,.sim #s-report{scroll-margin-top:104px}
/* campo invisível contra robôs: quem preenche não é gente */
.sim .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sim .sim-btn[aria-busy]{opacity:.6;cursor:progress}
