/* /app — composer. Same tokens as site.css; the ledger row becomes a form field row. */
.demo-strip{background:var(--orange);color:var(--ink);font:500 13px/1.4 var(--f-mono);letter-spacing:.03em;
  padding:9px var(--gutter);text-align:center;border-bottom:1px solid var(--ink)}
.demo-strip b{text-transform:uppercase;letter-spacing:.08em}

.gate,.result{padding:clamp(40px,8vw,96px) var(--gutter) clamp(48px,8vw,96px) calc(var(--gutter) + var(--axis));min-height:52vh}
.gate-h{font-size:clamp(36px,6vw,76px)}

.composer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);
  padding-right:var(--gutter);align-items:start}
.fields{padding-top:12px;padding-bottom:40px}
.field{position:relative;padding:26px 0 26px;border-bottom:1px solid var(--rule)}
.field .node{top:28px;left:calc(-1 * var(--axis) - 6px)}
.field h2{font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 14px}
.field.submit{border-bottom:0}

.account{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center}
.account img{width:56px;height:56px;border-radius:50%;background:var(--paper-deep);border:2px solid var(--ink);object-fit:cover}
.nick{font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.01em}
.linkish{background:none;border:0;padding:6px 0;font:600 14px var(--f-display);color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}

.drop{display:flex;flex-direction:column;gap:6px;padding:22px;border:2px dashed var(--ink);background:transparent;cursor:pointer;
  transition:background .18s var(--ease-out),transform .18s var(--ease-out)}
.drop:hover,.drop.over{background:var(--paper-deep)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop:focus-within{outline:2px solid var(--blue-ui);outline-offset:3px}
.drop-t{font-weight:800;font-size:18px}

textarea,select{width:100%;font:500 16px/1.45 var(--f-display);color:var(--ink);background:#FBFAF6;border:2px solid var(--ink);
  border-radius:0;padding:12px 14px}
textarea{resize:vertical;min-height:96px}
.counter{font-size:12px;margin:6px 0 0;text-align:right}
.select{position:relative}
.select::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
select{appearance:none;padding-right:44px;cursor:pointer;min-height:52px}
select:invalid{color:var(--mute)}
option:disabled{color:#A49E92}

.checks{display:flex;flex-wrap:wrap;gap:12px 28px}
.check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:600}
.check.block{display:flex;padding:14px 0;border-top:1px solid var(--rule);font-weight:400}
.check.block:first-child{border-top:0}
.check input{appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:2px solid var(--ink);background:#FBFAF6;
  display:grid;place-items:center;cursor:pointer;transition:background .15s var(--ease-out)}
.check input:checked{background:var(--ink)}
.check input:checked::after{content:"";width:6px;height:11px;border:solid var(--paper);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.check input:disabled{border-color:var(--rule);background:var(--paper-deep);cursor:not-allowed}
.check:has(input:disabled){color:#A49E92;cursor:not-allowed}

.switch{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{width:46px;height:26px;border:2px solid var(--ink);background:#FBFAF6;position:relative;margin-top:1px;
  transition:background .2s var(--ease-out)}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--ink);
  transition:transform .22s var(--ease-out),background .2s}
.switch input:checked+.track{background:var(--ink)}
.switch input:checked+.track::after{transform:translateX(20px);background:var(--paper)}
.switch input:focus-visible+.track{outline:2px solid var(--blue-ui);outline-offset:3px}
.disclose{margin:16px 0 0 60px;animation:open .3s var(--ease-out)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.label-note{margin:12px 0 0;padding:10px 12px;border-left:4px solid var(--blue);background:#FBFAF6;font-weight:600}

.msg{margin:10px 0 0;font-size:15px;min-height:0}
.msg:empty{display:none}
.msg.bad{color:var(--bad);font-weight:600}
.msg.warn{color:var(--warn);font-weight:600}
.msg.ok{color:var(--ok);font-weight:600}
.consent{margin:0 0 20px;font-size:15px;color:var(--ink-2);max-width:40em}
.consent a{font-weight:700}

.preview-col{position:sticky;top:20px;padding-top:32px}
.preview{animation-delay:.1s}
.phone{aspect-ratio:9/16;max-height:62vh;margin:0 auto;background:#000;border:1px solid #34322D;display:grid;place-items:center;overflow:hidden}
.phone video{width:100%;height:100%;object-fit:contain;background:#000}
.empty{font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#8C877C}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 0;font-size:12px}
.specs dt{color:#8C877C;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.specs dd{margin:4px 0 0;color:var(--paper)}

.meter{height:10px;border:2px solid var(--ink);margin:28px 0 20px;max-width:560px;background:#FBFAF6}
.meter span{display:block;height:100%;width:0;background:var(--ink);transition:width .3s var(--ease-out)}
.steps{list-style:none;margin:0 0 20px;padding:0;font-size:13px;max-width:560px}
.steps li{padding:8px 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px}
.steps li.done::after{content:"done";color:var(--ok)}
.steps li.now::after{content:"…";color:var(--mute)}
.steps li.fail::after{content:"failed";color:var(--bad)}

@media (max-width:860px){
  .composer{grid-template-columns:1fr;padding-right:0}
  .preview-col{position:static;padding:0 var(--gutter) 32px calc(var(--gutter) + var(--axis))}
  .fields{padding-right:var(--gutter)}
  .phone{max-height:46vh}
  .disclose{margin-left:0}
  .fields .preview-col{padding:0 0 26px}
}