/* Formwork editor mode: Document (#/write). Graphite chrome, a raised sheet, Newsreader on the sheet. */
.wr-main{overflow:hidden!important}
.wr{--serif:"Newsreader",Georgia,"Times New Roman",serif;display:grid;grid-template-columns:minmax(0,1fr);height:100%;min-height:0;background:var(--g0)}
.wr.has-pv{grid-template-columns:minmax(0,1fr) 392px}
.wr-scroll{overflow:auto;min-height:0;padding:40px 24px 120px;scroll-padding:96px}
.wr-sheet{position:relative;max-width:800px;margin:0 auto;background:var(--g1);border:1px solid var(--line);border-radius:var(--r-lg);padding:64px 88px 72px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 30px 60px -40px rgba(0,0,0,.8)}

/* editable text */
.wr [contenteditable]{outline:none;caret-color:var(--acc);border-radius:4px;transition:background .15s}
.wr [contenteditable]:hover{background:rgba(236,236,240,.025)}
.wr [contenteditable]:focus{background:rgba(90,185,252,.05)}
.wr [contenteditable].is-empty::before,.wr [contenteditable]:empty::before{content:attr(data-ph);color:var(--ink3);pointer-events:none}
.wr-title{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.08;letter-spacing:-.02em;margin:0 -6px 10px;padding:2px 6px;color:var(--ink);text-wrap:balance}
.wr-meta{margin:0 0 40px;color:var(--ink3);font-size:14px}

/* pages */
.wr-pg{position:relative}
.wr-pgh{display:flex;align-items:baseline;gap:12px;margin:0 0 20px;flex-wrap:wrap}
.wr-pgk{flex:none;font:500 13px/1 var(--mono);color:var(--acc);padding-top:2px}
.wr-pgt{flex:1;min-width:200px;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-.015em;margin:0 -6px;padding:2px 6px}
.wr-pgtools{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.wr-pgh:hover .wr-pgtools,.wr-pgh:focus-within .wr-pgtools{opacity:1}
.wr-break{height:1px;margin:48px -88px;background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 12px)}

/* blocks */
.wr-blk{position:relative;margin:0 -16px 6px;padding:14px 16px 12px;border-radius:var(--r-md);border:1px solid transparent;transition:background .18s var(--ease),border-color .18s}
.wr-blk:hover{background:rgba(236,236,240,.02)}
.wr-blk.is-sel{background:var(--g2);border-color:var(--line)}
.wr-blk.is-dragging{opacity:.35}
.wr-blk.is-drop-a{box-shadow:0 -2px 0 var(--acc)}
.wr-blk.is-drop-b{box-shadow:0 2px 0 var(--acc)}
.wr-add.is-drop-a{border-color:var(--acc);color:var(--acc)}
.wr-gut{position:absolute;left:-58px;top:12px;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.wr-blk:hover .wr-gut,.wr-blk.is-sel .wr-gut,.wr-blk:focus-within .wr-gut{opacity:1}
.wr-gb{display:grid;place-items:center;width:26px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--ink3);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.wr-gb:hover{background:var(--g3);color:var(--ink)}
.wr-gb:active{transform:scale(.94)}
.wr-grip{cursor:grab}
.wr-grip:active{cursor:grabbing}
.wr-q{display:flex;align-items:baseline;gap:10px}
.wr-qn{flex:none;min-width:20px;font:500 13px/1 var(--mono);color:var(--ink3);transform:translateY(-2px)}
.wr-label{flex:1;min-width:0;font-family:var(--serif);font-size:22px;line-height:1.35;letter-spacing:-.005em;color:var(--ink);margin:0 -4px;padding:1px 4px;text-wrap:pretty}
.wr-label.is-note{font-size:19px;color:var(--ink2);font-style:normal}
.wr-req{color:var(--acc);font-size:20px;line-height:1}
.wr-help{margin:4px -4px 0 26px;padding:1px 4px;font-size:15px;color:var(--ink2);line-height:1.5}
.wr-blk:not(.is-sel) .wr-help.is-empty{display:none}
.wr-ans{margin:12px 0 0 30px}
.wr-blk--note .wr-ans{display:none}
.wr-pipe{display:inline-flex;align-items:center;gap:4px;margin:0 1px;padding:0 7px 0 6px;border-radius:5px;background:var(--acc-d);color:var(--acc-l);font:500 .72em/1.7 var(--ui);vertical-align:.12em;white-space:nowrap;user-select:all}
.wr-pipe .i{opacity:.8}

/* answer previews */
.wr-line{display:flex;align-items:center;gap:10px;max-width:440px;height:42px;padding:0 12px;border-bottom:1px solid var(--line2);color:var(--ink3)}
.wr-line.is-tall{height:72px;align-items:flex-start;padding-top:12px;border:1px solid var(--line2);border-radius:var(--r-sm)}
.wr-phin{flex:1;min-width:0;height:28px;border:0;background:transparent;color:var(--ink2);font:15px var(--ui);outline:none;border-radius:4px;padding:0 4px}
.wr-phin::placeholder{color:var(--ink3)}
.wr-phin:focus{background:rgba(90,185,252,.06);color:var(--ink)}
.wr-ph{font-size:15px}
.wr-opts{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:460px}
.wr-opt{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 6px 4px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--g0);transition:border-color .15s}
.wr-opt:hover,.wr-opt:focus-within{border-color:var(--line3)}
.wr-optk{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--line2);font:600 12px/1 var(--mono);color:var(--ink3)}
.wr-opts--multi .wr-optk{border-radius:4px}
.wr-opts--choice .wr-optk{border-radius:50%}
.wr-optl{flex:1;min-width:0;font-size:15px;color:var(--ink);padding:2px 4px}
.wr-optt{display:flex;opacity:0;transition:opacity .15s}
.wr-opt:hover .wr-optt,.wr-opt:focus-within .wr-optt{opacity:1}
.wr-optadd{padding:2px 0 0 2px}
.wr-pills{display:flex;gap:8px}
.wr-pills span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--g0);color:var(--ink2);font-size:15px}
.wr-pills b{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--line2);font:600 12px/1 var(--mono);color:var(--ink3)}
.wr-stars{display:flex;gap:6px;color:var(--ink3)}
.wr-nps{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;max-width:520px}
.wr-nps span{display:grid;place-items:center;height:34px;border:1px solid var(--line);border-radius:5px;background:var(--g0);font:500 13px/1 var(--mono);color:var(--ink2)}
.wr-npsl{display:flex;justify-content:space-between;gap:12px;max-width:520px;margin-top:6px}
.wr-npsl .wr-phin{font-size:13px;color:var(--ink3);max-width:200px}
.wr-npsl .ta-r{text-align:right}
.wr-file{display:flex;align-items:center;gap:10px;max-width:440px;padding:16px;border:1.5px dashed var(--line2);border-radius:var(--r-sm);color:var(--ink3);font-size:15px}

/* show only if, as a sentence */
.wr-cond{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0 30px;padding:10px 12px;border-radius:var(--r-sm);background:rgba(90,185,252,.06);border:1px solid rgba(90,185,252,.18);color:var(--ink2);font-size:15px;line-height:1.9}
.wr-cond>.i{flex:none;margin-top:6px;color:var(--acc)}
.wr-cond p{flex:1;margin:0;min-width:0}
.wr-rule{white-space:normal}
.wr-cond .ib--sm{vertical-align:middle}
.wr-cond-x{flex:none;margin-top:2px}
.wr-tok{position:relative;display:inline-flex;align-items:center;max-width:100%;height:26px;padding:0 8px;border-radius:5px;background:var(--g3);border:1px solid var(--line2);color:var(--ink);font:500 14px/1 var(--ui);vertical-align:middle;cursor:pointer;transition:border-color .15s,background .15s}
.wr-tok:hover{border-color:var(--acc)}
.wr-tok span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-tok select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;font-size:14px}
.wr-tok--op{background:transparent;border-color:transparent;color:var(--ink2);padding:0 4px}
.wr-tok--join{background:transparent;border-color:transparent;color:var(--acc);padding:0 2px}
.wr-tok--val{color:var(--acc-l)}
input.wr-tok--in{width:88px;cursor:text;outline:none;padding:0 8px}
input.wr-tok--in:focus{border-color:var(--acc)}

/* tools row */
.wr-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0 30px;font-size:13px;color:var(--ink3);max-height:0;overflow:hidden;opacity:0;transition:opacity .18s var(--ease)}
.wr-blk.is-sel .wr-tools,.wr-blk:has(.wr-blk-b:focus-within) .wr-tools{max-height:none;overflow:visible;opacity:1}
.wr-type{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 10px;border:1px solid var(--line2);border-radius:999px;background:var(--g1);color:var(--ink2);font:500 13px var(--ui);cursor:pointer;transition:border-color .15s,color .15s,transform .15s}
.wr-type:hover{border-color:var(--line3);color:var(--ink);transform:translateY(-1px)}
.wr-type:active{transform:scale(.97)}
.wr-sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink2)}
.wr-sw input{position:absolute;opacity:0;pointer-events:none}
.wr-sw i{position:relative;width:28px;height:16px;border-radius:999px;background:var(--g4);transition:background .2s}
.wr-sw i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform .25s var(--spring)}
.wr-sw input:checked+i{background:var(--acc)}
.wr-sw input:checked+i::after{transform:translateX(12px);background:#04121d}
.wr-sw input:focus-visible+i{box-shadow:0 0 0 3px var(--acc-d)}
.wr-mini{display:inline-flex;align-items:center;gap:6px;color:var(--ink2)}
.wr-mini input{width:56px;height:26px;padding:0 6px;border:1px solid var(--line2);border-radius:5px;background:var(--g0);color:var(--ink);font:13px var(--mono);outline:none}
.wr-mini input:focus{border-color:var(--acc)}
.wr-tools-r{display:flex;gap:2px;margin-left:auto}
.wr-tb{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--ink2);font:500 13px var(--ui);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.wr-tb:hover{background:var(--g3);color:var(--ink);transform:translateY(-1px)}
.wr-tb:active{transform:scale(.97)}

/* add line, page footer, routing line */
.wr-add{display:flex;align-items:center;gap:10px;margin:8px -16px 0;padding:12px 16px;border:1px dashed transparent;border-radius:var(--r-md);color:var(--ink3);font-size:15px;cursor:text;transition:border-color .15s,color .15s,background .15s}
.wr-add:hover,.wr-add:focus-visible{border-color:var(--line2);color:var(--ink2);background:rgba(236,236,240,.02);outline:none}
.wr-add kbd,.wr-hint kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:4px;border:1px solid var(--line2);background:var(--g2);font:500 12px/1 var(--mono);color:var(--ink2)}
.wr-pgf{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.wr-btnl{display:inline-flex;align-items:center;gap:10px;color:var(--ink3);font-size:13px}
.wr-btnl span{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:var(--acc);color:#04121d;font:500 14px var(--ui)}
.wr-btnl span:focus{background:var(--acc-l)!important}
.wr-route{display:flex;align-items:flex-start;gap:10px;color:var(--ink3);font-size:14px;line-height:1.55}
.wr-route>.i{flex:none;margin-top:3px}
.wr-route p{flex:1;margin:0;min-width:0}
.wr-route b{color:var(--ink2);font-weight:500}
.wr-route-k{color:var(--ink2);font-weight:500}
.wr-route .lnk{flex:none;padding:0}
.wr-route .lnk .i{transition:transform .2s var(--ease)}
.wr-route .lnk:hover .i{transform:translateX(2px)}

/* sheet end: add buttons, endings */
.wr-sheetadd{display:flex;gap:8px;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.wr-ends{margin-top:40px}
.wr-ends h3{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--ink3)}
.wr-end{display:flex;gap:14px;align-items:flex-start;padding:16px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--g0);transition:border-color .15s}
.wr-end:hover,.wr-end:focus-within{border-color:var(--line2)}
.wr-endic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(63,207,142,.12);color:var(--ok)}
.wr-endb{flex:1;min-width:0}
.wr-endt{font-family:var(--serif);font-size:21px;line-height:1.3;font-weight:500;margin:0 -4px;padding:1px 4px}
.wr-endm{margin:4px -4px 0;padding:1px 4px;color:var(--ink2);font-size:15px;line-height:1.55}
.wr-endtools{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.wr-end:hover .wr-endtools,.wr-end:focus-within .wr-endtools{opacity:1}

/* preview pane */
.wr-pv{display:none;flex-direction:column;align-items:center;gap:16px;padding:20px 24px;border-left:1px solid var(--line);background:var(--g1);min-height:0;overflow:auto}
.wr.has-pv .wr-pv{display:flex}
.wr-pvh{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:336px;font-size:13px;font-weight:500;color:var(--ink2)}
.wr-pvh>span:last-child{display:flex;gap:2px}
.wr-phone{position:relative;flex:none;width:336px;height:min(680px,calc(100% - 52px));min-height:480px;border-radius:44px;padding:12px;background:#050506;border:1px solid var(--line2);box-shadow:0 0 0 6px #1a1b1e,0 30px 60px -30px rgba(0,0,0,.9)}
.wr-notch{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:92px;height:24px;border-radius:999px;background:#050506;z-index:2}
.wr-screen{height:100%;border-radius:33px;overflow:auto;scrollbar-width:none}
.wr-screen::-webkit-scrollbar{display:none}
.wr-screen.fw-r{padding-top:52px}

/* sub-bar tools */
.wr-count{font-family:var(--mono);font-size:13px;color:var(--ink3);white-space:nowrap}
.wr-hint{display:inline-flex;align-items:center;gap:6px;color:var(--ink3);white-space:nowrap}
.wr-hint kbd+kbd{margin-left:6px}
.wr-pvbtn.is-on{border-color:var(--acc);color:var(--acc)}

/* slash / quote menu */
.wr-menu{position:fixed;z-index:60;width:300px;max-height:min(440px,70vh);display:flex;flex-direction:column;background:var(--g2);border:1px solid var(--line2);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;animation:wrPop .18s var(--ease);font-family:var(--ui)}
.wr-menu--wide{width:360px}
@keyframes wrPop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.wr-menu-head{display:flex;align-items:center;gap:8px;padding:0 12px;height:42px;border-bottom:1px solid var(--line);color:var(--ink3)}
.wr-menu-head input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:14px var(--ui);outline:none}
.wr-menu-head input::placeholder{color:var(--ink3)}
.wr-menu-rows{overflow:auto;padding:6px}
.wr-menu-sep{padding:10px 8px 4px;font-size:13px;color:var(--ink3)}
.wr-menu-it{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:14px var(--ui);text-align:left;cursor:pointer}
.wr-menu-it.is-on,.wr-menu-it:hover{background:var(--g4)}
.wr-menu-it.is-on .wr-menu-ic{color:var(--acc)}
.wr-menu-ic{display:grid;place-items:center;width:22px;color:var(--ink2)}
.wr-menu-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-menu-it kbd{font:12px var(--mono);color:var(--ink3)}
.wr-menu-empty{padding:16px 10px;color:var(--ink3);font-size:14px}

@media (max-width:1280px){.wr-sheet{padding:56px 72px 64px}.wr-break{margin:44px -72px}}
@media (max-width:1100px){
  .wr.has-pv{grid-template-columns:minmax(0,1fr)}
  .wr.has-pv .wr-pv{position:absolute;right:16px;top:16px;bottom:16px;width:376px;z-index:12;border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow)}
  .wr-main{position:relative}
}
@media (max-width:820px){
  .wr-scroll{padding:16px 12px 96px}
  .wr-sheet{padding:40px 24px 48px 44px}
  .wr-break{margin:36px -24px 36px -44px}
  .wr-gut{left:-40px;flex-direction:column}
  .wr-title{font-size:34px}
}
@media (max-width:560px){
  .wr-sheet{padding:28px 16px 40px 36px;border-radius:var(--r-md)}
  .wr-break{margin:28px -16px 28px -36px}
  .wr-gut{left:-34px;opacity:1}
  .wr-gb{width:24px;height:24px}
  .wr-title{font-size:30px}
  .wr-pgt{font-size:24px;min-width:0}
  .wr-label{font-size:20px}
  .wr-ans,.wr-tools,.wr-cond{margin-left:0}
  .wr-help{margin-left:0}
  .wr-qn{display:none}
  .wr-blk{margin:0 -10px 6px;padding:12px 10px}
  .wr-nps{grid-template-columns:repeat(6,minmax(0,1fr))}
  .wr-tools-r{margin-left:0}
  .wr-tb span{display:none}
  .wr-pgtools{opacity:1}
  .wr.has-pv .wr-pv{inset:8px;width:auto}
  .wr-phone{width:100%;max-width:336px}
  .wr-menu,.wr-menu--wide{width:calc(100vw - 24px)}
}
@media (prefers-reduced-motion:reduce){.wr *,.wr-menu{transition:none!important;animation:none!important}}
.wr-screen .fw-badge{display:none}
.wr-label{flex:0 1 auto}
.wr-q{padding-right:8px}
@media (max-width:640px){.wr-count{display:none}}