/* Guided demo: what fills the panel (session, library, PTP, notebook page), and the
   dialog, notices and cursor drawn over the frame. Page and shell: demo-tour.css. */
.vh{display:flex;align-items:baseline;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.vh .pre{color:var(--faint)} .vh .t{font-family:var(--serif);font-size:1rem}
.vh .stats{margin-left:auto;color:var(--faint);font-size:.62rem;display:flex;gap:.7rem}
.body{padding:1rem 1.6rem;max-width:40rem;margin:0 auto}
.q1{font-weight:600;margin-bottom:.6rem;display:flex;justify-content:space-between;gap:.5rem}
.q1 span{font-weight:400;color:var(--faint);font-size:.6rem}
.q1 u{font-weight:400;color:var(--teal);font-size:.6rem}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.pc{border:1px solid var(--line);border-radius:.25rem;padding:.45rem .6rem;min-height:2.6rem}
.pc small{display:block;color:var(--faint);font-size:.58rem;margin-top:.15rem}
.pc.on{background:var(--teal-t);border-color:rgba(15,110,86,.4)}
.pc.add{color:var(--teal);display:grid;place-items:center;font-weight:600;border-style:dashed}
.units{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;border:1px solid var(--line);border-radius:.3rem;padding:.4rem .5rem;margin-top:.7rem;color:var(--muted);font-size:.6rem}
.tog{display:flex;border-radius:1rem;overflow:hidden;font-size:.58rem;font-weight:600;background:#EFE7DB;padding:.1rem}
.tog span{padding:.2rem .55rem;border-radius:1rem}.tog span:first-child{background:var(--teal);color:#fff}
.chip{border:1px solid rgba(15,110,86,.35);background:var(--teal-t);color:var(--teal);border-radius:1rem;padding:.1rem .45rem;font-size:.58rem}
.units .chip:first-of-type{margin-left:auto}
.dz{border:1.5px dashed var(--line);border-radius:.4rem;text-align:center;padding:.9rem;margin-top:.7rem;color:var(--muted);transition:background .3s,border-color .3s}
.dz b{display:block;color:var(--ink);margin-bottom:.2rem}
.dz.hot{background:var(--teal-t);border-color:var(--teal)}
.sugg{margin-top:.8rem;color:var(--muted)} .sugg div{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.sugg span{background:#EFE7DB;border-radius:1rem;padding:.25rem .6rem;color:var(--ink);font-size:.62rem}
.composer{position:absolute;left:50%;transform:translateX(-50%);bottom:.8rem;width:min(30rem,92%);border:1px solid var(--line);border-radius:.6rem;background:var(--raised);
  display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem .45rem .7rem;box-shadow:0 .6rem 1.2rem -1rem rgba(0,0,0,.4)}
.composer .tools{color:var(--muted);border-right:1px solid var(--line);padding-right:.6rem}
.composer .txt{flex:1;min-width:0;min-height:1.2em}
.composer .txt:empty::before{content:"Ask about your reservoir data…";color:var(--faint)}
.send{width:1.6rem;height:1.6rem;border-radius:.4rem;border:0;background:#9cc9b8;color:#fff;flex:none}
.send.ready{background:var(--teal)}
.thread{display:flex;flex-direction:column;gap:.7rem;padding:1rem 1.6rem;max-width:40rem;margin:0 auto}
.thread[hidden],.body[hidden],.pgrid[hidden]{display:none}
.qb{align-self:flex-end;background:var(--teal);color:#fff;padding:.5rem .75rem;border-radius:.6rem .6rem .15rem .6rem;max-width:75%}
.ab{position:relative;background:var(--canvas);border:1px solid var(--line);border-radius:.5rem;padding:.65rem .8rem;line-height:1.7}
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.62rem;font-weight:600;color:var(--teal);background:var(--teal-t);border-radius:1rem;padding:.05rem .45rem .05rem .15rem;white-space:nowrap}
.pill .k{display:grid;place-items:center;width:.95rem;height:.95rem;border-radius:50%;background:var(--teal);color:#fff;font-size:.52rem}
.pill .tier{font-size:.52rem;font-weight:500;background:rgba(0,0,0,.05);color:var(--faint);border-radius:1rem;padding:0 .3rem}
.acts{position:absolute;right:.5rem;top:-.85rem;display:flex;gap:.15rem;background:var(--raised);border:1px solid var(--line);border-radius:.35rem;padding:.15rem;opacity:0;transition:opacity .25s}
.acts.show{opacity:1}
.acts i{width:1.2rem;height:1.2rem;border-radius:.25rem;display:grid;place-items:center;color:var(--muted);font-style:normal}
.acts i.nbk{color:var(--teal)}
.tip{position:absolute;right:.4rem;top:-2.3rem;white-space:nowrap;background:var(--ink);color:#EFE9E0;border-radius:.3rem;padding:.2rem .45rem;font-size:.6rem;opacity:0;transition:opacity .2s}
.tip.show{opacity:1}
.typing{display:flex;gap:.25rem;padding:.4rem} .typing i{width:.4rem;height:.4rem;border-radius:50%;background:var(--faint);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.25}}

/* library */
.lib{padding:1rem 1.4rem}
.lib h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .7rem}
.thead,.row{display:grid;grid-template-columns:1.2rem minmax(0,1fr) 6.5rem 11rem 5rem 1.2rem;gap:.5rem;align-items:center;padding:.4rem .2rem}
.thead{font-size:.58rem;color:var(--faint);border-bottom:1px solid var(--line);margin-top:.9rem}
.row{border-bottom:1px solid var(--line)} .row .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cat{font-size:.58rem;background:#EFE7DB;border-radius:1rem;padding:.1rem .45rem;justify-self:start;white-space:nowrap}
.stc{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.status{display:flex;border:1px solid var(--line);border-radius:1rem;overflow:hidden;font-size:.56rem;min-height:1.2rem}
.seg{position:relative;display:flex;align-items:center;gap:.2rem;padding:0 .45rem;color:var(--muted);white-space:nowrap}
.seg+.seg{border-left:1px solid var(--line)}
.seg i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal-t);transition:width 1.6s linear}
.seg.done i{width:100%}.seg.done{color:var(--teal);font-weight:600}.seg span{position:relative}
.seg[hidden]{display:none}
.outlook{font-size:.52rem;letter-spacing:.04em;font-weight:600;border-radius:.3rem;padding:.1rem .4rem;border:1px solid var(--teal);color:var(--teal);background:var(--teal-t);opacity:0;transition:opacity .4s}
.outlook.show{opacity:1}
.outlook.soon{border-color:transparent;background:none;color:var(--faint);letter-spacing:0;font-weight:400}
.ref{display:flex;align-items:center;gap:.3rem;color:var(--teal);font-weight:600;font-size:.62rem}
.ref::before{content:"";width:.45rem;height:.45rem;border-radius:50%;border:1px solid var(--faint)}
.kebab{border:0;background:none;color:var(--muted);font-size:.9rem;padding:0}
.menu{position:absolute;right:1.8rem;width:min(13rem,80%);background:var(--raised);border:1px solid var(--line);border-radius:.4rem;box-shadow:0 .8rem 1.6rem -1rem rgba(0,0,0,.5);padding:.3rem;opacity:0;transform:translateY(-.3rem);transition:all .2s;pointer-events:none;z-index:3}
.menu.open{opacity:1;transform:none}
.menu div{padding:.32rem .5rem;border-radius:.25rem;color:var(--muted)}
.menu small{display:block;padding:.15rem .5rem;color:var(--faint);font-size:.55rem}
.menu hr{border:0;border-top:1px solid var(--line);margin:.2rem 0}
.menu div.hl{background:var(--teal-t);color:var(--teal);font-weight:600}
.fly{position:absolute;left:0;top:0;width:3.2rem;height:4rem;background:#fff;border:1px solid var(--line);border-radius:.3rem;box-shadow:0 .6rem 1.2rem -.6rem rgba(0,0,0,.5);z-index:20;opacity:0;transition:transform 1.1s cubic-bezier(.3,.7,.2,1),opacity .3s;pointer-events:none}
.fly::after{content:"PDF";position:absolute;bottom:.3rem;left:.35rem;font:600 .5rem var(--mono);color:#B3402E}
.fly::before{content:"";position:absolute;left:.4rem;right:.4rem;top:.5rem;height:1.5rem;background:repeating-linear-gradient(#e5ded3 0 2px,transparent 2px 6px)}

/* PTP page and notebook page */
.ptp{padding:1rem 1.4rem}
.micro{font-size:.6rem;color:var(--faint)} .micro b{color:var(--teal);font-weight:400}
.ptp h3{font-family:var(--serif);font-size:1.05rem;margin:.35rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ptp h3 .chip{font-family:var(--sans);font-weight:400}
.sec{border:1px solid var(--line);border-radius:.4rem;padding:.6rem .7rem;margin-top:.7rem}
.sec .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.4rem}
.sec .hd span:first-child{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.sec .hd b{font-family:var(--serif);font-weight:600}
.check{display:grid;grid-template-columns:.8fr 1fr 1.2fr 1fr;gap:.5rem;align-items:center;padding:.35rem 0;font-size:.66rem}
.check.head{color:var(--faint);font-size:.56rem;border-bottom:1px solid var(--line)}
.check .ok{color:var(--teal);font-weight:600}
.gbar{display:inline-block;width:2.4rem;height:.35rem;border-radius:.2rem;background:#E6DCCD}
.ghostcode{margin-top:.5rem;background:#1C1916;border-radius:.4rem;padding:.6rem .8rem}
.ghostcode i{display:block;height:.32rem;border-radius:.2rem;background:#3b352f;margin:.4rem 0}
.nb{padding:1.2rem 2rem}
.nbt{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:.8rem}
.block{display:flex;gap:.55rem;padding:.3rem 0;line-height:1.6}
.block::before{content:"";flex:none;width:.32rem;height:.32rem;border-radius:50%;background:var(--muted);margin-top:.55rem}
.block.moved{background:linear-gradient(90deg,var(--teal-t),transparent);border-radius:.3rem;padding:.4rem}

/* dialog, notice, cursor */
.dlg{position:absolute;inset:0;background:rgba(28,25,22,.35);display:grid;place-items:center;z-index:15;opacity:0;pointer-events:none;transition:opacity .25s}
.dlg.open{opacity:1}
.dlg .box{width:min(18rem,90%);background:var(--canvas);border:1px solid var(--line);border-radius:.9rem;padding:1.1rem;box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.6)}
.dlg h4{font-family:var(--serif);font-size:1rem;margin:0 0 .7rem}
.dlg p{margin:0;line-height:1.4} .dlg p .gbar{height:.45rem}
.dlg label{display:block;color:var(--muted);margin-top:.5rem}
.field{border:1px solid var(--line);background:var(--raised);border-radius:.35rem;padding:.45rem .6rem;min-height:2rem;margin-top:.25rem;color:var(--ink)}
.field.typing-in{border-color:var(--teal)} .field.typing-in::after{content:"|";color:var(--teal);animation:blink 1s infinite}
.field.sym{width:3.4rem;text-align:center}
.mrow{display:flex;gap:.5rem;align-items:center;border:1px solid var(--line);background:var(--raised);border-radius:.35rem;padding:.5rem .6rem}
.mrow i{width:.8rem;height:.8rem;border-radius:.15rem;background:var(--teal);color:#fff;font:600 .55rem/0.8rem var(--sans);text-align:center;font-style:normal}
.dlg .acts2{display:flex;justify-content:flex-end;gap:.4rem;margin-top:.9rem}
.dlg .acts2 span{padding:.35rem .8rem;border-radius:.45rem;color:var(--muted)}
.dlg .acts2 .go{background:var(--teal);color:#fff;font-weight:600}
.toast{position:absolute;left:50%;bottom:3.6rem;max-width:92%;transform:translate(-50%,.4rem);display:flex;align-items:center;gap:.5rem;background:var(--raised);border:1px solid var(--line);color:var(--ink);padding:.35rem .75rem;border-radius:1rem;z-index:16;opacity:0;transition:all .3s;box-shadow:0 .4rem 1rem -.6rem rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast b{color:var(--teal)}
.cursor{position:absolute;left:0;top:0;z-index:30;pointer-events:none;transform:translate(600px,420px);transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.cursor::after{content:"";position:absolute;left:-.55rem;top:-.55rem;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--orange);opacity:0}
.cursor.down::after{animation:ring .45s ease}
@keyframes ring{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
@media (max-width:56rem){ .pgrid{grid-template-columns:repeat(2,1fr)} .thead,.row{grid-template-columns:1rem minmax(0,1fr) 9rem 4.4rem 1rem} .thead .cc,.row .cat{display:none} }
@media (max-width:30rem){ .body,.thread{padding:.7rem .8rem} .lib,.ptp{padding:.7rem .8rem} .nb{padding:.9rem 1rem}
  .thead,.row{grid-template-columns:minmax(0,1fr) 9.4rem 1rem} .seg{white-space:normal;padding:.1rem .45rem} .thead .cn,.row .cn,.thead .cr,.row .ref{display:none} .check{font-size:.6rem} }