/* The NeoGravity Program page. Built on style.css: the same palette, type and card grammar as the
   verification page, with the few pieces a calculator needs. */

.pbar{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:0 0 1.5rem}
.pgo,.preset{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.7rem 1.1rem; border-radius:2px; cursor:pointer; border:1px solid var(--plenum)}
.pgo{background:var(--plenum); color:var(--paper)}
.pgo:hover{background:var(--plenum-lift)}
.pgo[disabled]{opacity:.6; cursor:progress}
.preset{background:transparent; color:var(--plenum)}
.preset:hover{border-color:var(--emission); color:var(--emission)}
.pstatus{font-family:var(--mono); font-size:.72rem; color:var(--text-soft); flex:1 1 18rem}
.pstatus.is-busy::before{content:""; display:inline-block; width:.6rem; height:.6rem; margin-right:.5rem;
  border-radius:50%; background:var(--emission); animation:ppulse 1s ease-in-out infinite alternate}
@keyframes ppulse{from{opacity:.25} to{opacity:1}}

.pgroups{display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.pgroup{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1rem 1.1rem 1.1rem;
  background:var(--paper)}
.pgroup h3{font-family:var(--display); font-weight:600; font-size:1rem; margin:0 0 .7rem}
.pfield{display:grid; grid-template-columns:1fr 9.5rem; gap:.15rem .6rem; align-items:center; margin:0 0 .65rem}
.pfield label{font-size:.9rem; line-height:1.3}
.pfield .psid{font-family:var(--mono); font-size:.66rem; color:var(--text-soft); display:block}
.pfield input{font-family:var(--mono); font-size:.82rem; padding:.35rem .45rem; width:100%;
  border:1px solid var(--rule); border-radius:2px; background:#fff; color:var(--text)}
.pfield input:focus{border-color:var(--plenum)}
.pfield.is-changed input{border-color:var(--emission); background:rgba(201,162,39,.10)}
.pfield .psrc{grid-column:1 / -1; font-family:var(--mono); font-size:.62rem; color:var(--text-soft);
  line-height:1.45}
.pfield .pbad{grid-column:1 / -1; font-family:var(--mono); font-size:.66rem; color:#8c2f2f}

.ptable-wrap{overflow-x:auto; margin:0 0 1.5rem; border:1px solid var(--rule)}
.ptable{width:100%; border-collapse:collapse; font-size:.9rem}
.ptable th{text-align:left; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); background:var(--paper-dim); padding:.6rem .8rem; border-bottom:1px solid var(--rule)}
.ptable td{padding:.55rem .8rem; border-bottom:1px solid var(--rule); vertical-align:top}
.ptable td.num{font-family:var(--mono); font-size:.8rem; white-space:nowrap}
.ptable td.sid a,.ptable td.sid{font-family:var(--mono); font-size:.78rem; white-space:nowrap}
.ptable tr.is-differs td.yours{background:rgba(201,162,39,.16)}
.ptable td.src{font-size:.8rem; color:var(--text-soft)}
.pmark{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; padding:.08rem .3rem; border-radius:2px;
  background:var(--plenum); color:var(--paper); white-space:nowrap}
.pmark.no{background:#8c2f2f}
.pmark.diff{background:var(--emission); color:var(--ink)}
.pmark.soft{background:var(--paper-dim); color:var(--text-soft); border:1px solid var(--rule)}
.pnote{font-size:.92rem; color:var(--text-soft); margin:0 0 1rem; max-width:48rem}

.pclaims{display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin:0 0 2rem}
.pclaim{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:.9rem 1rem; background:var(--paper)}
.pclaim h4{font-family:var(--display); font-weight:600; font-size:.95rem; margin:0 0 .45rem; line-height:1.3}
.pclaim h4 .vnum{font-size:.95rem; margin-right:.4rem}
.pclaim ul{list-style:none; margin:0; padding:0}
.pclaim li{font-size:.84rem; color:var(--text-soft); margin:0 0 .3rem}

.psearch{font-family:var(--mono); font-size:.8rem; padding:.45rem .6rem; border:1px solid var(--rule);
  border-radius:2px; min-width:16rem; flex:1 1 16rem; background:#fff}
.psteps{border-top:1px solid var(--rule)}
.ppart{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--emission);
  margin:1.6rem 0 .4rem}
.pstep{border-bottom:1px solid var(--rule); padding:.85rem 0}
.pstep[hidden]{display:none}
.pstep > header{display:grid; grid-template-columns:4.6rem 1fr auto; gap:.3rem .8rem; align-items:baseline}
.pstep .psid2{font-family:var(--mono); font-size:.86rem; color:var(--plenum)}
.pstep h3{font-family:var(--display); font-weight:600; font-size:.98rem; margin:0; line-height:1.3}
.pstep .ppills{display:flex; gap:.3rem; flex-wrap:wrap; justify-content:flex-end}
.pexpr{font-family:var(--mono); font-size:.84rem; margin:.45rem 0 .35rem 5.4rem; white-space:pre-wrap;
  word-break:break-word}
.pbody{margin:0 0 0 5.4rem; font-size:.86rem; color:var(--text-soft)}
.pbody p{margin:.2rem 0}
.pbody ul{list-style:none; margin:.3rem 0; padding:0}
.pbody li{margin:0 0 .2rem}
.prests a{font-family:var(--mono); font-size:.76rem; margin-right:.35rem}
.ptrace{margin:.5rem 0 0}
.ptrace summary{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft); cursor:pointer}
.ptrace pre{font-family:var(--mono); font-size:.68rem; line-height:1.55; background:var(--paper-dim);
  padding:.7rem .85rem; margin:.5rem 0 0; overflow-x:auto; white-space:pre; border-radius:2px}
.pill-DERIVED{background:var(--plenum); color:var(--paper); border-color:var(--plenum)}
.pill-FITTED,.pill-ASSUMED{background:rgba(201,162,39,.16); color:#7a6412; border-color:rgba(201,162,39,.5)}
.pill-OPEN,.pill-ALONE{background:transparent; border-style:dashed}
.pill-STANDARD,.pill-POSTULATE,.pill-BOUNDED{background:var(--paper-dim)}

.pstand{display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.pstand > div{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1rem 1.1rem}
.pstand h3{font-family:var(--display); font-weight:600; font-size:1rem; margin:0 0 .35rem}
.pstand p{margin:0 0 .5rem; font-size:.88rem; color:var(--text-soft)}
.pstand .ids a{font-family:var(--mono); font-size:.74rem; margin-right:.35rem; white-space:nowrap}

.pjump{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:1.4rem 0 0; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase}
.pjump a{color:inherit; opacity:.8}
.pjump a:hover{opacity:1}
.pprose{max-width:48rem}
.pprose p{margin:0 0 .8rem}
.pprose .pquote{border-left:2px solid var(--emission); padding:.1rem 0 .1rem 1rem; color:var(--text-soft)}
.psource{font-family:var(--mono); font-size:.64rem; color:var(--text-soft); letter-spacing:.04em}
.pkinds{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0; margin:1rem 0 0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.pkinds > div{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:.8rem .9rem; font-size:.86rem}
.pkinds h3{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; margin:0 0 .35rem}
.pkinds p{margin:0 0 .35rem; color:var(--text-soft)}
.pchain{list-style:none; margin:0 0 2rem; padding:0; border-top:1px solid var(--rule)}
.pchain li{border-bottom:1px solid var(--rule); padding:.9rem 0}
.pchain h3{font-family:var(--display); font-weight:600; font-size:1rem; margin:0 0 .35rem}
.pchain p{margin:0 0 .4rem; font-size:.9rem; max-width:52rem}
.pchain .ids a,.pfam .ids a,.pfail .ids a{font-family:var(--mono); font-size:.76rem; margin-right:.4rem; white-space:nowrap}
.pfam{display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.2rem 1.5rem; font-size:.86rem}
.pfam > div{padding:.3rem 0; border-bottom:1px solid var(--rule)}
.pfam code{font-size:.72rem}
.ppurpose{font-size:.9rem; color:var(--text-soft); max-width:52rem; margin:0 0 .8rem}
.pexplain{margin:.5rem 0 0; padding:.55rem .7rem; background:var(--paper-dim); border-radius:2px}
.pexplain p{margin:.15rem 0 .35rem}
.pexplain b{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text)}
.pcat{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; padding:.08rem .3rem; border-radius:2px;
  border:1px solid var(--rule); background:var(--paper); white-space:nowrap}
.pcat-DIFFERS{background:var(--emission); color:var(--ink); border-color:var(--emission)}
.pcat-SAME{background:var(--plenum); color:var(--paper); border-color:var(--plenum)}
.pcat-WEAK-FIELD{background:rgba(29,53,87,.12)}
.pcat-NOT{border-style:dashed}
.pcats,.pfcats{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:0; margin:0 0 1.5rem;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.pcats > div,.pfcats > div{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:.8rem .9rem;
  font-size:.86rem}
.pcats h3,.pfcats h3{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; margin:0 0 .3rem}
.pcats p,.pfcats p{margin:0; color:var(--text-soft)}
#pbycat details{border-bottom:1px solid var(--rule); padding:.5rem 0}
#pbycat summary{cursor:pointer; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
#pbycat dl{margin:.5rem 0 0; font-size:.86rem}
#pbycat dt{font-family:var(--mono); font-size:.76rem; margin-top:.45rem}
#pbycat dd{margin:0 0 0 1.5rem; color:var(--text-soft)}
.pfail{border-top:1px solid var(--rule); padding:1rem 0}
.pfail h3{font-family:var(--display); font-weight:600; font-size:1.02rem; margin:0 0 .3rem}
.pfail blockquote{margin:.4rem 0; border-left:2px solid var(--emission); padding:.1rem 0 .1rem 1rem; font-size:.9rem}
.pfail blockquote cite{display:block; font-family:var(--mono); font-size:.64rem; font-style:normal; color:var(--text-soft)}
.pfail .pbear{font-size:.9rem; max-width:52rem}
.plink{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; background:none;
  border:1px solid var(--rule); border-radius:2px; padding:.1rem .35rem; cursor:pointer; color:var(--text-soft)}
.plink:hover{border-color:var(--plenum); color:var(--plenum)}
.pmeasin{display:flex; flex-direction:column; gap:.25rem; min-width:9rem}
.pmeasin label{font-family:var(--mono); font-size:.6rem; color:var(--text-soft)}
.pmeasin input{font-family:var(--mono); font-size:.76rem; padding:.25rem .35rem; border:1px solid var(--rule);
  border-radius:2px; width:100%}
.pmeasin input.is-changed{border-color:var(--emission); background:rgba(201,162,39,.10)}
.ptable td.sig{color:var(--text-soft)}

@media (max-width:34rem){
  .pfield{grid-template-columns:1fr}
  .pstep > header{grid-template-columns:1fr}
  .pstep .ppills{justify-content:flex-start}
  .pexpr,.pbody{margin-left:0}
  .psearch{min-width:0}
}

/* the Python indicator */
.ppy{font-family:var(--mono); font-size:.68rem; color:var(--text-soft); margin:-.8rem 0 1.4rem}
.ppy.is-busy::before{content:""; display:inline-block; width:.5rem; height:.5rem; margin-right:.45rem; border-radius:50%;
  background:var(--emission); animation:ppulse 1s ease-in-out infinite alternate}
.ppy.is-ok::before{content:"●"; color:#2e7d4f; margin-right:.4rem}
.ppy.is-no{color:#8c2f2f}

/* the charts: framework #2a78d6, general relativity #eb6834 dashed (validated against the paper surface) */
.cgrid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr)); gap:1.5rem}
.cgrid2 figure{margin:0; border:1px solid var(--rule); background:#fff; padding:.8rem .9rem .6rem; min-width:0}
.cgrid2 figcaption{font-family:var(--display); font-weight:600; font-size:.98rem; margin:0 0 .4rem}
.cbox{position:relative}
.cchart{width:100%; height:auto; display:block; font-family:var(--mono)}
.cgrid{stroke:#e4e5ec; stroke-width:1}
.caxis{stroke:var(--rule); stroke-width:1}
.cmark{stroke:var(--rule); stroke-width:1; stroke-dasharray:2 3}
.cref{stroke:var(--text-soft); stroke-width:1.5; stroke-dasharray:5 3}
.ccross{stroke:var(--text-soft); stroke-width:1}
.ctick{font-size:10px; fill:var(--text-soft)}
.clabel{font-size:11px; fill:var(--text)}
.cdirect{font-size:11px; fill:var(--text)}
.clegend{display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-family:var(--mono); font-size:.66rem; color:var(--text-soft); margin:0 0 .3rem}
.clegend span{display:inline-flex; align-items:center; gap:.35rem}
.ctip{position:absolute; pointer-events:none; background:var(--plenum); color:var(--paper); font-family:var(--mono);
  font-size:.66rem; line-height:1.5; padding:.4rem .55rem; border-radius:3px; max-width:15rem; z-index:3}
.ctip b{display:block; font-weight:500}
.ctip span{display:block}
.ctip i{display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.35rem; vertical-align:middle}
.ctable{margin:.4rem 0 0}
.ctable summary{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--plenum); cursor:pointer}
.ctable .ptable-wrap{margin:.4rem 0 0; max-height:18rem; overflow:auto}

/* the maps */
.cmapwrap{overflow-x:auto; border:1px solid var(--rule); background:#fff; margin:.4rem 0}
.cmap{display:block; font-family:var(--mono)}
.cnode rect{fill:var(--paper); stroke:var(--plenum); stroke-width:1}
.cnode text{font-size:10.5px; fill:var(--plenum)}
.cnode.is-root rect{fill:var(--paper-dim); stroke:var(--rule)}
.cnode.is-root text{fill:var(--text-soft)}
.cnode.is-focus rect{fill:var(--plenum)}
.cnode.is-focus text{fill:var(--paper)}
a.cnode:hover rect,a.cnode:focus rect{stroke:var(--emission); stroke-width:2}
.cedge{fill:none; stroke:#c8cbd9; stroke-width:1}
.cedge.is-on{stroke:var(--emission); stroke-width:2}
.pchainmap{margin:0 0 1.5rem}

/* where the two can be told apart */
.ptest{border:1px solid var(--rule); border-left:3px solid var(--emission); background:var(--paper); padding:1rem 1.1rem;
  margin:0 0 1.2rem}
.ptest h3{font-family:var(--display); font-weight:600; font-size:1.1rem; margin:0 0 .3rem}
.ptest .pquote{border-left:2px solid var(--emission); padding:.1rem 0 .1rem 1rem; color:var(--text-soft); margin:.4rem 0}
.ptest b{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase}
.ptest .pper{margin:.35rem 0}
.pnums{display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; margin:.7rem 0; font-size:.9rem}
.pnums dt{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); padding-top:.2rem}
.pnums dd{margin:0}
.pnums dd b{font-family:var(--mono); font-size:.85rem; letter-spacing:0; text-transform:none}
.pnew{font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--emission);
  color:var(--ink); padding:.05rem .3rem; border-radius:2px}
#pmeas tr.pnewrow td{background:rgba(201,162,39,.06); font-size:.84rem}
.pnewer{padding-left:1.1rem; font-size:.88rem}
.pnewer li{margin:0 0 .6rem}
@media (max-width:40rem){ .pnums{grid-template-columns:1fr} }
.pnewin{width:0; min-width:100%}  /* so a newer row never widens the cited columns */
#pmeas td.detail{white-space:normal; min-width:11rem}
#pmeas td:nth-child(2){min-width:13rem}