/* The plan as a document (ui/planreview.js): version line, comments on a step, review link, What Dottpace read, page preview, dispute */
.pr-doc{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.pr-vline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:28px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.pr-v b,.pr-what b,.pr-fold-hd b{font-weight:var(--w-semibold);color:var(--fg)}
.pr-sub{font-size:var(--t-meta);color:var(--fg-3)}
.pr-rev{margin:0}
.pr-what{display:flex;align-items:flex-start;gap:7px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.pr-what > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.pr-what .lk{flex:none}
.pr-v-a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.pr-share,.pr-vers{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-8);background:var(--bg-2)}
.pr-share p{margin:0}
.pr-share > .btn{align-self:flex-start}
.pr-share-r{display:flex;flex-wrap:wrap;gap:6px}
.pr-url{width:100%;min-width:0;height:30px;padding:0 8px;border:1px solid var(--line-ctl);border-radius:var(--r-6);background:var(--bg);color:var(--fg-2);font-size:var(--t-meta)}
.pr-ver ol{margin:4px 0;padding-left:18px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.pr-ver p{margin:0}
.pr-ver + .pr-ver{padding-top:8px;border-top:1px solid var(--line)}
.pr-fold{border-top:1px solid var(--line)}
.pr-fold-hd{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 0;border:0;background:none;color:var(--fg-2);font:inherit;font-size:var(--t-co);text-align:left;cursor:pointer}
.pr-fold-hd > svg{flex:none;color:var(--fg-3)}
.pr-fold-s{flex:1;min-width:0;overflow:hidden;color:var(--fg-3);font-size:var(--t-meta);text-overflow:ellipsis;white-space:nowrap}
.pr-fold-bd{display:flex;flex-direction:column;gap:10px;padding:2px 0 12px}
.pr-read ul{display:flex;flex-direction:column;gap:5px;margin:4px 0 0;padding:0;list-style:none}
.pr-read li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:0 6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.pr-read li > svg{margin-top:3px;color:var(--fg-3)}
.pr-read li > .pr-sub{grid-column:2}
.pr-read .lk{display:inline;overflow-wrap:anywhere}
/* a step's comments */
.pr-tag{flex:none;padding:0 6px;border-radius:var(--r-4);background:var(--accent-tint);color:var(--info-ink);font-size:var(--t-meta);line-height:var(--lh-meta,18px);font-weight:var(--w-medium)}
.pr-cm{flex:none;display:inline-flex;align-items:center;gap:3px;min-width:24px;height:24px;padding:0 4px;border:0;border-radius:var(--r-6);background:none;color:var(--fg-3);font:inherit;font-size:var(--t-meta);cursor:pointer}
.pr-cm.has-open{color:var(--info-ink)}
@media (hover:hover){.pr-cm:hover{background:var(--hover);color:var(--fg)}}
.ap-chg li.pr-th{display:block;padding:6px 0 10px 12px;border-left:2px solid var(--line-strong);list-style:none}
.pr-cs{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.pr-c{display:flex;align-items:flex-start;gap:8px}
.pr-c.is-done p{color:var(--fg-3)}
.pr-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--r-full);background:var(--bg-3);color:var(--fg-2);font-size:var(--t-meta);font-weight:var(--w-semibold)}
.pr-c-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:var(--t-co);line-height:var(--lh-co)}
.pr-c-h b{font-weight:var(--w-semibold);color:var(--fg)}
.pr-c p{margin:1px 0 2px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.pr-c-a{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:var(--t-meta)}
.pr-cf{display:flex;flex-direction:column;gap:6px}
.pr-cf input,.pr-cf textarea{width:100%;min-width:0;padding:6px 8px;border:1px solid var(--line-ctl);border-radius:var(--r-6);background:var(--bg);color:var(--fg);font:inherit;font-size:var(--t-co);resize:vertical}
.pr-cf-r{display:flex;justify-content:flex-end;gap:6px}
/* the page before and after: a drawn sample page, never a screenshot */
.pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.pv-grid{grid-template-columns:minmax(0,1fr)}}
.pv{margin:0;min-width:0}
.pv-cap{display:flex;align-items:baseline;gap:6px;margin-bottom:5px;font-size:var(--t-co)}
.pv-cap b{font-weight:var(--w-semibold);color:var(--fg)}
.pv-win{overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--r-8);background:var(--bg)}
.pv-bar{display:flex;align-items:center;gap:8px;height:24px;padding:0 8px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.pv-dots{display:inline-flex;gap:3px}.pv-dots i{width:6px;height:6px;border-radius:var(--r-full);background:var(--bg-3)}
.pv-url{overflow:hidden;color:var(--fg-3);font-size:var(--t-meta);text-overflow:ellipsis;white-space:nowrap}
.pv-nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line);color:var(--fg-3);font-size:var(--t-meta);white-space:nowrap;overflow:hidden}
.pv-nav b{margin-right:auto;color:var(--fg);font-weight:var(--w-semibold)}
.pv-body{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding:12px 10px;font-size:var(--t-meta);line-height:var(--lh-co);color:var(--fg-2)}
.pv-body h1,.pv-body h2,.pv-body h3,.pv-body h4,.pv-body p,.pv-body ul,.pv-body ol,.pv-body table,.pv-body blockquote{margin:0;font-size:var(--t-meta)}
.pv-body h2,.pv-body h3,.pv-body h4{color:var(--fg);font-size:var(--t-co);font-weight:var(--w-semibold)}
.pv-body ul,.pv-body ol{padding-left:16px}
.pv-body table{width:100%;border-collapse:collapse}.pv-body td,.pv-body th{padding:2px 4px;border:1px solid var(--line);text-align:left;overflow-wrap:anywhere}
.pv-body .pv-h1{color:var(--fg);font-size:var(--t-body);line-height:var(--lh-co);font-weight:var(--w-semibold)}
.pv-sk{display:flex;flex-direction:column;gap:5px}.pv-sk i{height:6px;border-radius:var(--r-2);background:var(--bg-3)}.pv-sk i:last-child{width:62%}
.pv-hero,.pv-price,.pv-data,.pv-row,.pv-code{display:flex;flex-direction:column;gap:1px}
.pv-hero{min-height:84px;justify-content:flex-end;padding:8px;border-radius:var(--r-6);background:var(--bg-3)}
.pv-price b,.pv-hero b,.pv-data b,.pv-row b{color:var(--fg);font-weight:var(--w-semibold)}
.pv-data,.pv-row{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-6)}
.pv-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pv-tiles > div{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.pv-img{height:32px;border-radius:var(--r-4);background:var(--bg-3)}
.pv-none,.pv-more{color:var(--fg-3)}
.pv-body .is-mark{padding:6px 8px;border-radius:var(--r-6)}
.pv-body .is-mark.bf{outline:1.5px dashed var(--fg-4);outline-offset:-1.5px}
.pv-body .is-mark.af{background:var(--accent-tint);outline:1.5px solid var(--c-blue);outline-offset:-1.5px}
.pv-note{display:flex;align-items:flex-start;gap:5px;margin:0}
.pv-note svg{flex:none;margin-top:2px}
/* the approval sheet's line, Discuss and a dispute */
.pr-sheet{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 8px;font-size:var(--t-meta);color:var(--fg-2)}
.pr-sheet svg{vertical-align:-2px}
.pr-redo{display:flex;flex-direction:column;gap:6px;margin-top:2px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-8);background:var(--bg-2);font-size:var(--t-co);line-height:var(--lh-co)}
.pr-redo ul{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.pr-redo li{display:flex;align-items:flex-start;gap:6px}
.pr-redo li > svg{flex:none;margin-top:3px;color:var(--fg-3)}
.pr-redo b{font-weight:var(--w-semibold)}
.pr-redo p{margin:0}
.pr-redo-a{display:flex;flex-wrap:wrap;gap:4px 12px}
.pr-dz-who{display:block;margin-bottom:2px;font-size:var(--t-meta);opacity:.8}
.pr-disp{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r-12);background:var(--bg-2);border:1px solid var(--line);color:var(--fg)}
.pr-disp > svg{flex:none;margin-top:2px;color:var(--warn-ink)}
.pr-disp b{font-weight:var(--w-semibold)}
.pr-disp p{margin:2px 0 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.pr-disp .pr-sub{font-size:var(--t-meta);color:var(--fg-3)}
.pr-disp .lk{margin-top:4px}
.pr-disp-a{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}

/* a fix waiting for approval: the decision in the first screen */
.pr-dh h1{margin-bottom:6px}
.pr-dh .fd-sum{margin-bottom:10px}
.pr-dh .pr-what{margin-bottom:10px}
.pr-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 12px}
.pr-facts [data-k="expected"] .ap-fs{display:none}
.pr-acts{margin-top:10px}
.pr-dec{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin-top:10px}
.pr-dec > .btn,.pr-dec > :first-child{flex:none}
.pr-dec .ap-cant{flex:1 1 280px;margin:0}
.pr-dh .ap-note{display:block;margin:8px 0 0;padding:0}
.story .fd-fix.is-wait{background:var(--bg-2)}
/* a review link: this plan and nothing else */
.pr-rv{display:flex;flex-direction:column;gap:12px;max-width:760px;height:100%;margin:0 auto;padding:24px 16px 48px;overflow-y:auto;box-sizing:border-box}
.pr-rv-top{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pr-rv-top b{font-weight:var(--w-semibold)}
.pr-rv-top .pr-sub{margin-left:auto}
.pr-rv h1{margin:4px 0 0;font-size:var(--t-t2,22px);line-height:var(--lh-t2,28px);font-weight:var(--w-semibold)}
.pr-rv .fd-sum{margin:0}
@media (max-width:760px){.pr-facts{grid-template-columns:minmax(0,1fr)}}
/* phone: every control here is at least 32px, and long capsules read as lines */
@media (max-width:640px){
  .pr-cm{min-width:32px;height:32px;justify-content:center}
  .pr-doc .lk,.pr-c-a .lk,.pr-what .lk,.pr-disp .lk,.pr-redo-a .lk{display:inline-flex;align-items:center;min-height:32px}
  .pr-fold-hd{min-height:44px}
  .fd-for{height:auto;min-height:32px;padding:4px 10px 4px 8px;border-radius:var(--r-8);align-items:flex-start;flex-wrap:wrap}
  .fd-for span{white-space:normal}
  .wp-o{min-height:32px}
  .tk-add input{min-height:32px}
  .pr-v-a{margin-left:0;width:100%}
}