/* The variant pop-up: used on the Fifty variants page and on the Manuscripts page.
   Uses the tokens from style.css. */
:root{--r0:#8a2a1e;--r1:#2f5d7c;--r2:#8c7343;--r3:#4d6b4a;--r4:#6b4a6b}
/* Dialog */
dialog#vdialog{width:min(980px,96vw);max-height:92vh;overflow:hidden;padding:0;border:1px solid var(--rule);background:var(--stone);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.55)}
dialog#vdialog::backdrop{background:rgba(31,42,54,.55)}
.vd{display:flex;flex-direction:column;max-height:calc(92vh - 2px)}
.vd-bar{display:flex;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--vellum);flex:0 0 auto}
.vd-nav,.vd-close{font:inherit;font-size:1.05rem;background:transparent;border:1px solid var(--rule);color:var(--ink);padding:.2em .8em;cursor:pointer;border-radius:3px}
.vd-nav{font-size:1.4rem;line-height:1;padding:.1em .6em}
.vd-close{margin-left:auto}
.vd-nav:hover,.vd-close:hover{border-color:var(--rubric);color:var(--rubric)}
.vd-body{overflow:auto;padding:26px 30px 34px}
.vd-body h3{font-size:clamp(1.7rem,3vw,2.2rem);color:var(--rubric);margin-bottom:6px}
.vd-body .where{color:var(--ink-soft);font-size:1rem;margin-bottom:14px}
.vd-body .summary{font-size:1.25rem;max-width:var(--measure);margin-bottom:26px}
.vd-body h4{font-size:1.05rem;font-weight:600;margin:30px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule);color:var(--ink)}
#vdialog .rd{margin:0 0 18px;padding:14px 18px 16px;background:var(--vellum);border:1px solid var(--rule);border-left:5px solid var(--c)}
#vdialog .rd .rl{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:6px}
#vdialog .rd .rl b{font-weight:600;font-size:1.1rem}
#vdialog .rd .badge{font-size:.85rem;color:#fff;background:var(--c);padding:0 .55em;border-radius:2px}
#vdialog .rd .gk{font-family:"GFS Didot","EB Garamond",serif;font-size:1.08rem;line-height:1.6;margin:0 0 8px;color:var(--ink)}
#vdialog .rd .early{font-size:.98rem;color:var(--ink-soft);margin:0 0 8px}
#vdialog .rd.stat{border-left-style:dashed}
#vdialog .rd{display:block}   /* the Variant search page also has result rows called .rd */
#vdialog .chips{display:flex;flex-wrap:wrap;gap:6px}
#vdialog .w{font:inherit;font-size:.98rem;line-height:1.2;display:inline-flex;align-items:baseline;gap:5px;padding:.28em .6em;border:1px solid var(--rule);background:var(--stone);color:var(--ink);cursor:pointer;border-radius:2px}
#vdialog .w:hover{border-color:var(--rubric);color:var(--rubric)}
#vdialog .w small{font-size:.78rem;color:var(--ink-soft)}
#vdialog .w.unl{border-style:dashed;cursor:default}
#vdialog .w.unl:hover{border-color:var(--rule);color:var(--ink)}
#vdialog .w .gl{font-family:"GFS Didot","EB Garamond",serif}
#vdialog .notes{margin:8px 0 0;padding:0;list-style:none;font-size:.95rem;color:var(--ink-soft)}
#vdialog .notes li{margin:2px 0}
#vdialog .keyline{font-size:.95rem;color:var(--ink-soft);margin:6px 0 0}

/* Edition grid */
#vdialog .edgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#vdialog .edgrid h5{margin:0 0 8px;font-size:.98rem;font-weight:600;color:var(--ink-soft)}
#vdialog .edgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#vdialog .edgrid li{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border:1px solid var(--rule);background:var(--vellum);font-size:.98rem}
#vdialog .edgrid li b{min-width:3.2em}
#vdialog .edgrid li span{color:var(--ink-soft);line-height:1.35}
#vdialog .edgrid li.differs{border-color:var(--rubric)}
#vdialog .edgrid li.differs b{color:var(--rubric)}
#vdialog .edgrid li.bracket,#vdialog .edgrid li.double,#vdialog .edgrid li.split{border-color:var(--gilt)}
#vdialog .edgrid li.na{opacity:.6}
#vdialog .edgrid .gk{font-family:"GFS Didot","EB Garamond",serif}
#vdialog .edfoot{font-size:.95rem;color:var(--ink-soft);margin:12px 0 0;max-width:var(--measure)}
#vdialog .tl-link{margin-top:24px}

#vdialog .w sup,#vdialog .notes sup{font-size:.7em;line-height:0;margin-left:1px}
#vdialog .w .gl sup{font-family:"EB Garamond",serif}
#vdialog sup sup{font-size:.8em;margin-left:1px}
#vdialog .edgrid .part{display:block;margin-top:3px}
#vdialog .edgrid.rpm{grid-template-columns:minmax(0,1fr);margin-top:14px}

@media (max-width:820px){#vdialog .edgrid{grid-template-columns:1fr}}
@media (min-width:821px){#vdialog .edgrid.rpm{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.vd-body{padding:20px 18px 28px}}