/* Variants explorer + manuscript timeline. Uses the tokens from style.css */
:root{
  --r0:#8a2a1e; --r1:#2f5d7c; --r2:#8c7343; --r3:#4d6b4a; --r4:#6b4a6b;
}
.xhero{padding:64px 0 48px;border-bottom:1px solid var(--rule)}
.xhero h1{font-size:clamp(2.3rem,4.6vw,3.4rem)}
.xhero .lede{margin-top:16px}
.xnote{max-width:var(--measure);font-size:1rem;color:var(--ink-soft);border-left:3px solid var(--gilt);padding:4px 0 4px 14px;margin:22px 0 0}
.xnote b{color:var(--ink);font-weight:600}

.controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-bottom:26px}
.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--vellum)}
.seg button{font:inherit;font-size:1rem;padding:.35em .95em;background:transparent;border:0;border-right:1px solid var(--rule);color:var(--ink-soft);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button:hover{background:rgba(138,42,30,.06)}
.seg button[aria-pressed="true"]{background:var(--rubric);color:#f6efe6}
.count{margin:0;font-size:1rem;color:var(--ink-soft);font-style:italic}
.pick{font-size:1rem;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.pick select{font:inherit;font-size:1rem;padding:.35em .6em;border:1px solid var(--rule);background:var(--vellum);color:var(--ink);border-radius:3px;max-width:100%}

/* Variant cards */
.vgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.vcard{margin:0}
.vcard button{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;text-align:left;font:inherit;background:var(--vellum);border:1px solid var(--rule);padding:18px 20px 16px;cursor:pointer;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.vcard button:hover{border-color:var(--rubric);box-shadow:0 10px 24px -20px rgba(31,42,54,.6)}
.vcard .ref{font-size:1.3rem;color:var(--rubric);font-weight:500;line-height:1.2}
.vcard .what{font-size:1.05rem;line-height:1.5;margin:0;flex:1}
.vcard .meta{font-size:.95rem;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.vcard .tag{border:1px solid var(--rule);padding:0 .5em;border-radius:2px;font-size:.88rem}
.vempty{grid-column:1/-1;color:var(--ink-soft);font-style:italic}

/* 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)}
.rd{margin:0 0 18px;padding:14px 18px 16px;background:var(--vellum);border:1px solid var(--rule);border-left:5px solid var(--c)}
.rd .rl{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:6px}
.rd .rl b{font-weight:600;font-size:1.1rem}
.rd .badge{font-size:.85rem;color:#fff;background:var(--c);padding:0 .55em;border-radius:2px}
.rd .gk{font-family:"GFS Didot","EB Garamond",serif;font-size:1.08rem;line-height:1.6;margin:0 0 8px;color:var(--ink)}
.rd .early{font-size:.98rem;color:var(--ink-soft);margin:0 0 8px}
.rd.stat{border-left-style:dashed}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.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}
.w:hover{border-color:var(--rubric);color:var(--rubric)}
.w small{font-size:.78rem;color:var(--ink-soft)}
.w.unl{border-style:dashed;cursor:default}
.w.unl:hover{border-color:var(--rule);color:var(--ink)}
.w .gl{font-family:"GFS Didot","EB Garamond",serif}
.notes{margin:8px 0 0;padding:0;list-style:none;font-size:.95rem;color:var(--ink-soft)}
.notes li{margin:2px 0}
.keyline{font-size:.95rem;color:var(--ink-soft);margin:6px 0 0}

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

/* Timeline */
.tl-controls{align-items:flex-end}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 20px;font-size:.98rem}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{display:inline-block;width:14px;height:14px;background:var(--c);border-radius:2px}
.tl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.tl{border-top:1px solid var(--rule)}
.era{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--rule)}
.era h3{font-size:1.15rem;color:var(--rubric);line-height:1.2}
.era h3 small{display:block;font-size:.9rem;color:var(--ink-soft);font-weight:400;margin-top:2px}
.era.empty{display:none}
.tl .m{font:inherit;font-size:1rem;display:inline-flex;align-items:baseline;gap:4px;padding:.25em .55em;border:1px solid var(--rule);background:var(--vellum);color:var(--ink);cursor:pointer;border-radius:2px;position:relative}
.tl .m:hover{border-color:var(--rubric)}
.tl .m small{font-size:.76rem;color:var(--ink-soft)}
.tl .m .gl{font-family:"GFS Didot","EB Garamond",serif}
.tl .m[aria-pressed="true"]{background:var(--ink);color:#f3f1ea;border-color:var(--ink)}
.tl .m[aria-pressed="true"] small{color:#d8d3c6}
.tl .m.dim{opacity:.35}
.tl .m.hl{background:var(--c);border-color:var(--c);color:#fff}
.tl .m.hl small{color:#f1ece3}
.tl .m sup{font-size:.7rem;margin-left:2px}
.tl .m.edge::after{content:"";display:none}
.msinfo{position:sticky;top:78px;background:var(--vellum);border:1px solid var(--rule);padding:22px 22px 20px;min-height:160px}
.msinfo .empty{color:var(--ink-soft);font-style:italic;margin:0}
.msinfo h3{font-size:1.6rem;color:var(--rubric);margin-bottom:4px}
.msinfo dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:1rem}
.msinfo dt{color:var(--ink-soft)}
.msinfo dd{margin:0}
.msinfo h4{font-size:1rem;margin:16px 0 8px;font-weight:600;border-top:1px solid var(--rule);padding-top:12px}
.msinfo ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.msinfo li button{font:inherit;font-size:.98rem;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--rubric);text-decoration:underline;text-underline-offset:2px}
.msinfo li span{color:var(--ink-soft);font-size:.9rem}
.msinfo .unl{font-size:.95rem;color:var(--ink-soft)}
.caveat{font-size:.98rem;color:var(--ink-soft);max-width:80ch;margin:26px 0 0}

.tl-controls .lbl{font-size:1rem;color:var(--ink-soft);margin-right:-8px}

.msinfo .where{font-size:.95rem;color:var(--ink-soft);margin:-2px 0 10px}
.msinfo .citelist{max-height:min(46vh,420px);overflow-y:auto;padding-right:8px;scrollbar-width:thin}
.msinfo{max-height:calc(100vh - 100px);overflow-y:auto}

.w sup,.msinfo sup,.notes sup{font-size:.7em;line-height:0;margin-left:1px}
.w .gl sup{font-family:"EB Garamond",serif}

/* Edition agreement grid */
.gkey{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px;font-size:.98rem;color:var(--ink-soft)}
.gkey span{display:inline-flex;align-items:center;gap:6px}
.gridwrap{overflow-x:auto;border:1px solid var(--rule);background:var(--vellum);max-width:100%}
table.agree{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:1rem}
.agree th,.agree td{padding:6px 8px;border-bottom:1px solid var(--rule);text-align:center;font-weight:400}
.agree thead th{background:var(--stone);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--rule)}
.agree th.fam{font-size:.9rem;color:var(--ink-soft);border-left:1px solid var(--rule)}
.agree th.ed{font-size:.95rem;font-weight:600;border-left:1px solid var(--rule);cursor:help}
.agree th.corner{text-align:left;min-width:120px;position:sticky;left:0;z-index:3;background:var(--stone)}
.agree th.pass{text-align:left;position:sticky;left:0;background:var(--vellum);z-index:1;white-space:nowrap}
.agree th.pass button{font:inherit;background:none;border:0;padding:0;color:var(--rubric);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.agree tr.book th{text-align:left;background:var(--stone);font-weight:600;color:var(--ink);padding-top:10px;position:static}
.agree td.c{border-left:1px solid var(--rule)}
.agree .c.same,.gkey .c.same{color:var(--ink-soft)}
.agree .c.differs,.gkey .c.differs{background:rgba(138,42,30,.12);color:var(--rubric-dark);font-weight:600}
.agree .c.bracket,.gkey .c.bracket{background:rgba(140,115,67,.2);color:#5e4d27;font-size:.88rem}
.agree .c.na,.gkey .c.na{color:#5d6168}
.gkey i{font-style:normal;display:inline-block;min-width:2.6em;text-align:center;border:1px solid var(--rule);padding:0 .3em;border-radius:2px}
.agree td.tot{font-weight:600;font-size:.95rem;border-left:1px solid var(--rule);background:var(--stone)}
.agree tfoot th.pass{background:var(--stone);font-size:.95rem}
.agree .refcol{box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink)}
.agree thead th.refcol{background:var(--ink);color:#f3f1ea}

.tl .m .cdot,.legend .cdot{display:inline-block;width:9px;height:9px;background:var(--c);border:1px solid #fff;border-radius:1px;align-self:center;margin-left:2px}
.tl .m.hl .cdot{border-color:#fff}
.tl .m.conly{background:var(--vellum);border:2px dashed var(--c);padding:calc(.25em - 1px) calc(.55em - 1px)}
.legend i.dashed{width:14px;height:14px;background:transparent;border:2px dashed var(--ink-soft);border-radius:2px;display:inline-block}
.legend i.cdot{width:10px;height:10px;border-radius:1px;border:1px solid var(--ink-soft)}

.tl .m.unav{background:repeating-linear-gradient(135deg,var(--vellum) 0 5px,#dcd8cc 5px 7px);border-style:dotted;border-color:var(--ink-soft);color:var(--ink-soft)}
.legend i.unavi{width:14px;height:14px;border:1px dotted var(--ink-soft);background:repeating-linear-gradient(135deg,var(--vellum) 0 3px,#dcd8cc 3px 5px);display:inline-block;border-radius:2px}

#msinfo .more{margin:10px 0 0;font-size:.98rem}
#msinfo .more a{color:var(--rubric)}
#msinfo .linkbtn{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--rubric);text-decoration:underline;text-underline-offset:2px}
#msinfo .linkbtn:hover{color:var(--rubric-dark)}
.cite-ta{position:fixed;left:-9999px;top:0}
#msinfo .more.ext{margin-top:4px;display:flex;flex-wrap:wrap;gap:2px 14px}

/* a mark raised again from a raised number, as in 𝔓101vid */
sup sup{font-size:.8em;margin-left:1px}
.seg button:disabled{cursor:default}
.seg button:disabled:not([aria-pressed="true"]){opacity:.4}
.seg button:disabled:hover{background:transparent}
.seg button:disabled[aria-pressed="true"]:hover{background:var(--rubric)}

.edgrid .part{display:block;margin-top:3px}
.edgrid.rpm{grid-template-columns:minmax(0,1fr);margin-top:14px}

.tl-controls{align-items:flex-start}
.tl-controls .lbl{min-height:44px}
.tl-controls .lbl{display:flex;align-items:center}
.tl-controls .pickwrap{display:grid;grid-template-columns:auto auto;gap:4px 10px;align-items:center;justify-content:start}
.tl-controls .pickwrap label{min-height:44px;display:flex;align-items:center}
.tl-controls .pickwrap .pagenote{grid-column:2}
.tl-controls .pagenote{font-size:.95rem;color:var(--ink-soft)}

.filters .csvopts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;font-size:.95rem;color:var(--ink-soft)}
.filters .csvopts label{display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:0;cursor:pointer;color:var(--ink);font-size:.95rem}
.filters .csvopts input{width:20px;height:20px;margin:0;padding:0;accent-color:var(--rubric)}
.filters .fbtns .btn{height:auto;min-height:44px;padding-top:.35em;padding-bottom:.35em;line-height:1.25}
@media (max-width:820px){.edgrid{grid-template-columns:1fr}}
@media (max-width:980px){
  .tl-layout{grid-template-columns:1fr}
  .msinfo{position:static;order:-1}
}
@media (max-width:560px){
  .era{grid-template-columns:1fr;gap:8px}
  .vd-body{padding:20px 18px 28px}
}
@media (max-width:980px){.msinfo.is-empty{display:none}}
@media (max-width:980px){.msinfo{max-height:none}.msinfo .citelist{max-height:360px}}
@media (min-width:821px){.edgrid.rpm{grid-template-columns:repeat(3,1fr)}}
/* Phones: button groups become an even grid instead of wrapping unevenly */
@media (max-width:640px){
.controls{display:block}
.controls .seg{margin-bottom:14px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-bottom-width:0}
.seg button{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.6em .4em;background:var(--vellum);min-height:44px}
.seg button:nth-child(3n){border-right:0}
.seg button:hover{background:#ebe3d8}
.seg button[aria-pressed="true"],.seg button[aria-pressed="true"]:hover{background:var(--rubric)}
.seg button:disabled:hover{background:var(--vellum)}
#groupFilter button:last-child,#gridGroup button:last-child{grid-column:span 2;border-right:0}
#kindFilter,#contentFilter{grid-template-columns:repeat(2,minmax(0,1fr))}
#kindFilter button,#contentFilter button{border-right:1px solid var(--rule)}
#kindFilter button:nth-child(2n),#contentFilter button:nth-child(2n){border-right:0}
}