/* ============================================================
   Cleard — Outcome Builder (interactive demo)
   Reuses tokens + components from site.css.
   ============================================================ */
.bld{height:100vh;overflow:hidden;background:var(--surface-2);}
.bld *{box-sizing:border-box;}

/* ---------- top bar ---------- */
.bld-top{height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:rgba(246,243,238,.85);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);position:relative;z-index:20;gap:16px;}
.bld-top__l{display:flex;align-items:center;gap:14px;min-width:0;}
.bld-top__r{display:flex;align-items:center;gap:14px;}
.bld-logo{display:flex;align-items:center;}
.bld-logo .star{width:20px;height:21px;}
.bld-logo .star path{fill:var(--ink);}
.bld-crumb{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;color:var(--fg-3);white-space:nowrap;}
.bld-crumb .sep{opacity:.5;}
.bld-crumb__cur{color:var(--ink);font-weight:600;}
.bld-ver{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--purple);
  background:#F0ECF6;border:1px solid rgba(89,64,140,.25);border-radius:999px;padding:3px 9px;}
.bld-saved{font-size:12px;color:var(--fg-3);}
.bld-tpl{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);}
.bld-tpl select{font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer;outline:none;
  transition:border-color .15s;}
.bld-tpl select:hover{border-color:rgba(48,32,35,.28);}
.bld-price{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums;}
.bld-price em{font-style:normal;font-size:11px;font-weight:500;color:var(--fg-3);letter-spacing:.02em;}
.bld-run{height:38px;padding:0 18px;font-size:13.5px;}
.bld-run .ar{font-size:9px;}
.bld-run[disabled]{opacity:.55;cursor:default;}

/* ---------- app shell ---------- */
.bld-app{height:calc(100vh - 60px);display:grid;grid-template-columns:1fr 392px;}

/* ---------- canvas ---------- */
.bld-canvas{position:relative;overflow:auto;padding:48px 24px 80px;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;
  display:flex;flex-direction:column;align-items:center;}
.bld-conn{width:2px;height:30px;background:var(--line);position:relative;flex:none;}
.bld-conn::after{content:"+";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  color:var(--purple);font-size:15px;display:grid;place-items:center;line-height:1;}

/* ---------- node card ---------- */
.bnode{width:430px;max-width:100%;flex:none;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-soft);cursor:pointer;overflow:hidden;
  transition:box-shadow .2s,border-color .2s,transform .2s;}
.bnode:hover{box-shadow:var(--shadow-card);}
.bnode.is-sel{border-color:var(--purple);box-shadow:0 0 0 3px rgba(89,64,140,.18),var(--shadow-card);}
.bnode.is-active{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.2);}
.bnode__head{display:flex;align-items:center;gap:10px;padding:11px 16px;font-weight:600;font-size:14px;color:var(--ink);}
.bnode__ic{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;flex:none;}
.bnode__ic svg{width:16px;height:16px;}
.bnode__kind{flex:1;}
.bnode__idx{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;background:rgba(48,32,35,.06);color:var(--fg-2);}
.bnode__body{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line-2);}
.bnode__bic{width:20px;height:20px;flex:none;color:var(--ink);}
.bnode__bic svg{width:20px;height:20px;}
.bnode__title{flex:1;font-weight:500;font-size:15px;color:var(--ink);letter-spacing:-.01em;min-width:0;}
.bnode__title code{font-family:var(--mono);font-size:13px;background:var(--surface-2);padding:2px 6px;border-radius:6px;color:var(--purple);}
.bnode__meta{font-family:var(--mono);font-size:12.5px;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.bnode__meta.ok{color:var(--green);}

/* node kind accents (header tint) */
.bnode--start .bnode__head{background:rgba(22,163,74,.10);} .bnode--start .bnode__ic{color:var(--green);}
.bnode--define .bnode__head{background:rgba(89,64,140,.10);} .bnode--define .bnode__ic{color:var(--purple);}
.bnode--verify .bnode__head{background:rgba(89,64,140,.10);} .bnode--verify .bnode__ic{color:var(--purple);}
.bnode--ladder .bnode__head{background:rgba(194,164,183,.20);} .bnode--ladder .bnode__ic{color:var(--purple);}
.bnode--settle .bnode__head{background:rgba(89,64,140,.10);} .bnode--settle .bnode__ic{color:var(--purple);}
.bnode--outcome .bnode__head{background:rgba(22,163,74,.10);} .bnode--outcome .bnode__ic{color:var(--green);}
.bnode--start .bnode__idx,.bnode--outcome .bnode__idx{background:rgba(22,163,74,.12);color:var(--green);}
.bnode--define .bnode__idx,.bnode--verify .bnode__idx,.bnode--settle .bnode__idx{background:rgba(89,64,140,.12);color:var(--purple);}

/* ---------- config panel ---------- */
.bld-panel{background:var(--paper);border-left:1px solid var(--line);overflow:auto;padding:22px 22px 60px;}
.bp-head{display:flex;align-items:center;gap:11px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.bp-head__ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#F0ECF6;color:var(--purple);flex:none;}
.bp-head__ic svg{width:19px;height:19px;}
.bp-head__t{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.01em;line-height:1.1;}
.bp-head__s{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:3px;}
.bp-sec{margin-bottom:24px;}
.bp-sec__lbl{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.bp-sec__lbl b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);}
.bp-sec__lbl .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.bp-desc{font-size:13.5px;line-height:1.55;color:var(--fg-2);margin-bottom:18px;}

/* segmented control */
.seg{display:flex;padding:3px;border-radius:10px;background:var(--surface-2);gap:2px;}
.seg button{flex:1;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:500;
  color:var(--fg-2);min-height:30px;border-radius:7px;cursor:pointer;transition:color .15s,background .15s;padding:4px 6px;}
.seg button[aria-checked="true"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(48,32,35,.14);}

/* toggle chips (data minimization) */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--purple);
  background:#F0ECF6;border:1px solid transparent;border-radius:999px;padding:7px 13px;cursor:pointer;
  transition:opacity .15s,background .15s,color .15s;user-select:none;}
.chip .ck{font-size:12px;}
.chip[aria-pressed="false"]{background:var(--surface-2);color:var(--fg-3);}
.chip[aria-pressed="false"] .ck{opacity:.4;}

/* text input (rule) */
.bp-input{width:100%;font-family:var(--mono);font-size:13.5px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;transition:border-color .15s,background .15s;}
.bp-input:focus{border-color:var(--purple);background:var(--paper);}

/* editable ladder values */
.tier__v[contenteditable]{outline:none;border-radius:5px;padding:1px 4px;cursor:text;}
.tier__v[contenteditable]:hover{background:rgba(89,64,140,.08);}
.tier__v[contenteditable]:focus{background:var(--paper);box-shadow:0 0 0 2px rgba(89,64,140,.3);}

/* mini note */
.bp-note{font-size:12.5px;line-height:1.5;color:var(--fg-3);margin-top:12px;}
.bp-note b{color:var(--fg-2);font-weight:600;}

/* receipt preview inside panel reuses .console/.receipt + .stamp from site.css */
.bld-panel .console{margin-top:6px;}
.bld-panel .receipt__rows .rr{opacity:1;transform:none;}

/* hint when nothing run yet */
.bld-hint{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--fg-3);
  text-align:center;margin-top:20px;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .bld{height:auto;overflow:auto;}
  .bld-app{grid-template-columns:1fr;height:auto;}
  .bld-canvas{height:auto;padding:32px 16px 40px;}
  .bld-panel{border-left:0;border-top:1px solid var(--line);}
  .bld-top{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px;}
  .bld-top__r{flex:1;justify-content:flex-end;}
  .bld-saved,.bld-crumb{display:none;}
}
@media(max-width:520px){
  .bnode{width:100%;}
  .bld-tpl span{display:none;}
}