/* Whole-text statistics page */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:18px;margin-top:6px}
.cpanel{background:var(--vellum);border:1px solid var(--rule);padding:16px 18px 14px}
.cpanel h3{margin:0;font-size:1.2rem}
.csub{margin:0 0 10px;color:var(--ink-soft);font-size:.95rem;font-style:italic}
.crow{display:grid;grid-template-columns:3.2em 1fr 3.6em;gap:8px;align-items:center;width:100%;font:inherit;font-size:.95rem;background:transparent;border:0;padding:2px 4px;margin:0;cursor:pointer;color:var(--ink);text-align:left;border-radius:2px}
.crow:hover,.crow:focus-visible{background:rgba(138,42,30,.07)}
.cname{font-weight:600}
.ctrack{display:block;height:12px;background:rgba(31,42,54,.06)}
.cbar{display:block;height:100%}
.cval{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tablebox{margin-top:26px}
.tablebox summary{cursor:pointer;color:var(--rubric);font-size:1.02rem}
.tablebox .gridwrap{margin-top:12px}
.tablebox table small{color:var(--ink-soft)}
.fam-key{margin-bottom:18px}

.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px 18px;align-items:start;margin-bottom:22px}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:.95rem;color:var(--ink-soft)}
.filters select,.filters input{width:100%;box-sizing:border-box;text-overflow:ellipsis;font:inherit;font-size:1rem;padding:.4em .6em;border:1px solid var(--rule);background:var(--vellum);color:var(--ink);border-radius:3px;max-width:100%;min-width:0}
.filters select,.filters input,.filters .btn{height:44px;padding-top:0;padding-bottom:0}
.filters select:disabled{opacity:.5}
.rhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;min-height:1.6em;margin-bottom:6px}
.rhead p{margin:0;color:var(--ink);font-size:1.02rem}
#pagechip{color:var(--ink-soft);font-style:italic;font-size:.95rem}
.strip{width:100%;background:var(--vellum);border:1px solid var(--rule);cursor:pointer;line-height:0}
.strip canvas{display:block}
.stripscale{position:relative;height:1.5em;margin:4px 0 22px;font-size:.85rem;color:var(--ink-soft)}
.stripscale span{position:absolute;white-space:nowrap}
.results{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.res{background:var(--vellum);border:1px solid var(--rule);padding:12px 16px;transition:background .6s}
.res.flash{background:rgba(140,115,67,.28)}
.rhd{font-size:1.05rem}
.rhd .pg{color:var(--ink)}
.rhd .caller{color:var(--ink-soft);font-size:.92rem}
.lem{margin:4px 0 6px;font-size:1.02rem}
.lem .lab{color:var(--ink-soft);font-size:.92rem}
.lem b.en{font-family:'EB Garamond',serif;font-weight:700}
.gk{font-family:'GFS Didot','EB Garamond',serif}
.rd{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:3px 0;border-top:1px dotted var(--rule)}
.rd .tags{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px}
.tagbr{display:inline-flex;align-items:center;gap:1px;font-weight:600;color:var(--ink)}
.etag{font-size:.8rem;font-weight:600;padding:0 .4em;border-radius:2px;color:#fff;line-height:1.5}
.etag.f-byz{background:var(--r3)}.etag.f-crit{background:var(--r1)}.etag.f-tr{background:var(--r2)}
.rd .kd{font-size:.9rem;color:var(--ink-soft);font-style:italic}
.more{margin:18px 0 0}
[hidden]{display:none!important}
.gkey i.swatch{display:inline-block;width:14px;height:14px;border:0;min-width:0;padding:0}
.sw-byz{background:var(--r3)}.sw-crit{background:var(--r1)}.sw-tr{background:var(--r2)}
.etag sup{font-size:.7em;line-height:0;margin-left:1px}

.filters .fhint{font-size:.9rem;line-height:1.45;color:var(--ink-soft)}

.specnote{margin-top:10px;padding:8px 12px;border-left:3px solid var(--rubric);background:rgba(138,42,30,.06);font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
.specnote b{color:var(--ink);font-weight:600}

/* ---- Where the notes fall, spelling or substance, kinds by edition ---- */
.k-form{background:#9aa9b6}.k-omit{background:#8a2a1e}.k-add{background:#b9803c}.k-diff{background:#3f5670}.k-order{background:#5f8060}.k-repl{background:#7a5d86}.k-minor{background:#cdc6b3}.k-omitall{background:#5b1c13}.k-short{background:#8a2a1e}.k-long{background:#b9803c}
.swatch.k-short,.swatch.k-long,.swatch.k-omitall,.swatch.k-form,.swatch.k-omit,.swatch.k-add,.swatch.k-diff,.swatch.k-order,.swatch.k-repl,.swatch.k-minor{display:inline-block;width:14px;height:14px;min-width:0;padding:0;border:0}
.seg{display:flex;align-items:center;justify-content:center;min-width:2px;height:100%;color:#fff;font-size:.9rem;font-variant-numeric:tabular-nums;text-decoration:none;box-shadow:inset -1px 0 0 rgba(255,255,255,.55);overflow:hidden}
.seg.k-minor,.seg.k-form{color:var(--ink)}
.seg>span{white-space:nowrap}
.seg:hover,.seg:focus-visible{filter:brightness(1.12);outline-offset:-3px}
.kgrid{display:grid;gap:4px;margin-top:6px;max-width:820px}
.kpick{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.kbtn{font:inherit;font-size:1rem;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:.4em .9em;color:var(--ink);background:var(--vellum);border:1px solid var(--rule);border-radius:3px;cursor:pointer}
.kbtn:hover{background:#fff}
.kbtn[aria-pressed="true"]{border-color:var(--rubric);box-shadow:inset 0 0 0 1px var(--rubric);font-weight:600}
.kbtn .swatch{display:inline-block;width:14px;height:14px;min-width:0;padding:0;border:0}
.kr{display:grid;grid-template-columns:5.4em 1fr 4.4em;gap:10px;align-items:center;padding:5px 6px;text-decoration:none;color:var(--ink);border-radius:2px}
.kr:hover,.kr:focus-visible{background:rgba(138,42,30,.07);color:var(--ink)}
a.kr:hover{color:var(--ink)}
.ktr{display:block;height:22px;background:rgba(31,42,54,.06)}
.kbar{display:block;height:100%}
.kpct{text-align:right;font-size:1.4rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.kname{font-weight:600;display:inline-flex;align-items:center;gap:6px}
.kname .swatch{width:10px;height:10px}
.dscroll{overflow-x:auto;padding-bottom:6px}
.dmap{display:grid;gap:3px;min-width:max-content}
.drow{display:grid;grid-template-columns:9.5em auto;gap:8px;align-items:center}
.dname{font-size:.95rem;text-align:right;color:var(--ink);white-space:nowrap}
.dcells{display:flex;gap:3px}
.dc{display:flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:.72rem;text-decoration:none;color:var(--ink);border:1px solid rgba(31,42,54,.12);font-variant-numeric:tabular-nums}
.dc:hover,.dc:focus-visible{outline:2px solid var(--rubric);outline-offset:1px;position:relative;z-index:1}
.d0{background:#f1eee5}.d1{background:#e6d3c4}.d2{background:#d3a98f}.d3{background:#b7745a;color:#fff}.d4{background:#8a2a1e;color:#fff}
.dkey{display:flex;align-items:center;gap:4px;margin:0 0 14px;color:var(--ink-soft);font-size:.92rem}
.dsw{display:inline-block;width:22px;height:14px;border:1px solid rgba(31,42,54,.12)}
.dkey .dsw:first-of-type{margin-left:6px}.dkey .dsw:last-of-type{margin-right:6px}
h3.subhead{margin:34px 0 6px;font-size:1.3rem}
.rtoggle{display:inline-flex;align-items:center;gap:8px;margin:6px 0 4px;font-size:1rem;cursor:pointer}
.rtoggle input{width:18px;height:18px;accent-color:var(--rubric);cursor:pointer}
.rgrid{display:grid;gap:3px;margin-top:10px;max-width:760px}
.rrow{display:grid;grid-template-columns:9.5em 1fr 7.5em;gap:10px;align-items:center;text-decoration:none;color:var(--ink);padding:2px 4px;border-radius:2px;font-size:.98rem}
.rrow:hover,.rrow:focus-visible{background:rgba(138,42,30,.07)}
.rname{text-align:right}
.rtrack{display:block;height:12px;background:rgba(31,42,54,.06)}
.rbar{display:block;height:100%;background:var(--r3)}
.rval{color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.ctabwrap{margin-top:12px;overflow-x:auto}
.ctab{border-collapse:collapse;width:100%;max-width:980px;background:var(--vellum);border:1px solid var(--rule)}
.ctab thead th{text-align:left;font-weight:600;font-size:.92rem;color:var(--ink-soft);padding:9px 14px;border-bottom:1px solid var(--rule);background:rgba(31,42,54,.04)}
.ctab td,.ctab tbody th{text-align:left;vertical-align:top;padding:9px 14px;border-top:1px dotted var(--rule);font-weight:400}
.ctab tbody tr:first-child td,.ctab tbody tr:first-child th{border-top:0}
.ctab tbody th a{font-weight:600;white-space:nowrap}
.ctab tbody th small{display:block;color:var(--ink-soft);font-size:.88rem}
.ctab tbody th small a{font-weight:400;white-space:nowrap}
.ctab .gk{font-size:1.1rem}
.ctab .calt .gk{color:var(--rubric)}
.ctab .calt i{color:var(--ink-soft)}
.ctags{white-space:normal}
.ctags .etag{display:inline-block;margin:1px 3px 1px 0}
.arow{display:grid;grid-template-columns:5.2em 3.8em 1fr;gap:10px;align-items:center;margin:4px 0}
.agrid{max-width:820px;margin-top:6px}
.aname{font-weight:600;text-align:right}
.atrack{display:flex;height:26px;background:rgba(31,42,54,.06)}
.atrack .aseg.al-div,a.seg.aseg.al-div:hover,a.seg.aseg.al-div:focus-visible{color:var(--ink)}
.acount{text-align:right;font-size:1.35rem;font-weight:600;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;text-decoration:none}
a.acount:hover,a.acount:focus-visible{color:var(--rubric);text-decoration:underline}
.apct{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:.95rem}
.swatch.al-agree,.swatch.al-div{display:inline-block;width:14px;height:14px;min-width:0;padding:0;border:0;background:var(--ink)}
.swatch.al-div{background:color-mix(in srgb, var(--ink) 40%, #ebe8df)}
.arow.wide{grid-template-columns:8.6em 3.6em 1fr 10.5em}
.arow.wide .apct{text-align:left;font-size:.9rem}
/* keep chart text readable on hover: the site's link-hover color is dark red, which vanishes on dark boxes and bars */
a.dc:hover,a.dc:focus-visible{color:var(--ink)}
a.dc.d3:hover,a.dc.d3:focus-visible,a.dc.d4:hover,a.dc.d4:focus-visible{color:#fff}
a.seg:hover,a.seg:focus-visible{color:#fff}
a.seg.k-form:hover,a.seg.k-form:focus-visible,a.seg.k-minor:hover,a.seg.k-minor:focus-visible{color:var(--ink)}
a.rrow:hover,a.rrow:focus-visible{color:var(--ink)}
#catnote{flex-basis:100%;order:3;margin:6px 0 0}

/* choices in force, and the no-results help */
.achips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.achips[hidden],.nores[hidden]{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px;font:inherit;font-size:.95rem;line-height:1.3;color:var(--ink);background:var(--vellum);border:1px solid var(--rule);border-radius:18px;cursor:pointer;text-align:left}
.chip sup{font-size:.7em;line-height:0;margin-left:1px}
.chip .chx{font-size:1.15rem;line-height:1;color:var(--rubric)}
.chip:hover,.chip:focus-visible{border-color:var(--rubric);color:var(--ink)}
.nores{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--rubric);background:rgba(138,42,30,.06)}
.nores p{margin:0 0 8px;font-size:1rem;color:var(--ink)}
.nores .nrbtns{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.nores .btn{height:auto;min-height:44px;padding:6px 14px;text-align:left}

/* the sort box sits with the results, not among the filters */
.sortrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px;font-size:.95rem;color:var(--ink-soft)}
.sortrow select{font:inherit;font-size:1rem;height:44px;padding:0 .6em;border:1px solid var(--rule);background:var(--vellum);color:var(--ink);border-radius:3px;max-width:100%}

/* highlighted search words */
mark.hit{background:rgba(138,42,30,.18);color:inherit;border-radius:2px;padding:0 1px}
#restored{margin:0 0 12px}

/* the long explanation at the foot of Explore variants: a short introduction and a closed section with the details */
.howto{margin:12px 0 0;max-width:80ch}
.howto summary{cursor:pointer;color:var(--rubric);font-size:1.02rem;display:inline-block;padding:4px 0}
.howto summary:hover{text-decoration:underline}
.howto summary::before{content:"\25B8\00a0"}
.howto[open] summary::before{content:"\25BE\00a0"}
.howto[open] summary{margin-bottom:4px}
.howto h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin:16px 0 4px}
.howto p{margin:0 0 8px}

/* the search controls: three columns, four on wide screens, one on phones; the buttons use the same columns */
.filters{grid-template-columns:repeat(3,minmax(0,1fr))}
.filters .wide{grid-column:1/-1}
.fbtns{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
.filters .span2{grid-column:1/-1}
/* your own notes (shown only where that feature is available) */
.fgroup{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px 18px;align-items:start;border:1px solid var(--rule);background:rgba(255,255,255,.25);padding:12px 16px 16px}
.fgroup[hidden]{display:none}
.fgroup .fgtitle{grid-column:1/-1;font-weight:600}
.fgroup .span2{grid-column:span 1}
.fgroup .fgbtn{align-self:start;margin-top:30px}
/* the buttons: one group for the search, one for the spreadsheet downloads */
.fbar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 36px;align-items:flex-start;border-top:1px solid var(--rule);padding-top:16px}
.fcap{font-size:.95rem;color:var(--ink-soft);margin:0 0 6px}
.frow{display:flex;flex-wrap:wrap;gap:10px 14px}
.filters .frow .btn{height:auto;min-height:44px;padding:.35em 1.1em;line-height:1.25}
.filters .fsub .csvopts{margin-top:10px}

.hints{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--rule)}
.hbtn{font:inherit;background:none;border:0;padding:0;color:var(--rubric);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hbtn:hover{color:var(--rubric-dark)}
.hbtn::before{content:"\25B8\00a0";display:inline-block;text-decoration:none}
.hbtn[aria-expanded=true]::before{content:"\25BE\00a0"}
.hnote{margin:10px 0 0;font-size:.9rem;color:var(--ink-soft)}
.hl{margin:10px 0 0;padding:0;list-style:none}
.hl li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:0 0 10px;padding:0 0 0 12px;border-left:3px solid var(--rule);line-height:1.5}
.hl .tags{display:inline-flex;flex-wrap:wrap;gap:0}
.hl .tags>*{margin:0 3px 3px 0}
.hl .ht{flex:1 1 12em;min-width:0}
/* “How to read a note”: two example notes with numbered parts and a key to each */
.readnote{margin:12px 0 20px;border:1px solid var(--rule);background:var(--vellum)}
.readnote>summary{cursor:pointer;padding:10px 16px;color:var(--rubric);font-size:1.05rem}
.readnote>summary:hover{text-decoration:underline}
.readnote[open]>summary{border-bottom:1px solid var(--rule)}
.hw-body{padding:12px 16px 16px}
.hw-intro{margin:0 0 12px;color:var(--ink-soft)}
.hw-note{margin:0;padding:0;list-style:none}
.hw-note li.res,.hw-note .rd{min-width:0}
.hw-note .cmp-panel{min-width:0;max-width:100%;flex:1 1 100%}
.hw-keys{list-style:none;margin:14px 0 0;padding:0;columns:2 300px;column-gap:24px}
.hw-keys li{break-inside:avoid}
.hw-k{display:flex;gap:10px;align-items:baseline;text-align:left;width:100%;font:inherit;font-size:.95rem;line-height:1.45;background:none;border:0;padding:5px 6px;border-radius:3px;cursor:pointer;color:var(--ink)}
.hw-k:hover,.hw-k[aria-pressed="true"]{background:rgba(138,42,30,.08)}
.hw-k:focus-visible,.hw-mk:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}
.hw-num,.hw-mk{flex:none;display:inline-block;min-width:1.45em;height:1.45em;border-radius:50%;background:var(--rubric);color:#fff;font:600 .72rem/1.45em "EB Garamond",serif;text-align:center}
.hw-mk{border:0;padding:0;margin:0 6px 0 0;cursor:pointer;vertical-align:.12em}
.hw-on{outline:2px solid var(--rubric);outline-offset:3px;border-radius:2px}
.hw-key{margin:14px 0 4px;font-weight:600}
.hw-h{font-size:1.1rem;margin:22px 0 10px;font-weight:600}
@media (max-width:560px){.res{padding:10px 12px}}
@media (min-width:641px){.dhint{display:none}}
@media (max-width:640px){
  .rrow{grid-template-columns:6.8em 1fr 6.2em;gap:6px;font-size:.9rem}
  .arow{grid-template-columns:4.7em 3.2em 1fr;gap:6px;font-size:.9rem}
  .acount{font-size:1.15rem}
  .arow.wide{grid-template-columns:5.6em 2.9em 1fr;row-gap:0}
  .arow.wide .apct{grid-column:3;font-size:.8rem;margin-top:-2px}
  .aname{white-space:nowrap}
  .ctab thead{position:absolute;left:-9999px}
  .ctab,.ctab tbody,.ctab tr,.ctab td,.ctab tbody th{display:block}
  .ctab tr{padding:8px 12px;border-top:1px solid var(--rule)}
  .ctab tbody tr:first-child{border-top:0}
  .ctab td,.ctab tbody th{border:0 !important;padding:2px 0}
  .ctab td::before{content:attr(data-label)": ";color:var(--ink-soft);font-size:.88rem}
  .ctab tbody th small{display:inline;margin-left:8px}
  .kr{grid-template-columns:3.6em 1fr 3.4em;gap:6px;padding:9px 4px}
  .kr .ktr{height:20px}.kr .kpct{font-size:1.25rem}
  .kbtn{flex:1 1 calc(50% - 8px);justify-content:flex-start}
  .drow{grid-template-columns:8em auto}
  .dname{font-size:.88rem}
}
@media (max-width:640px){
  .chip{font-size:.9rem}
  .nores .btn{width:100%}
}
@media (max-width:640px){.sortrow select{flex:1 1 100%;width:100%}}
@media (min-width:1102px){
  .filters,.fbtns{grid-template-columns:repeat(4,minmax(0,1fr))}
  .filters .wide,.filters .span2{grid-column:span 2}
  .fgroup{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .filters,.fbtns{grid-template-columns:minmax(0,1fr)}
  .filters .wide,.filters .span2,.fgroup .span2{grid-column:auto}
  .fgroup{grid-template-columns:minmax(0,1fr)}
  .fgroup .fgbtn{margin-top:0}
  .fbar{display:block}
  .fsub+.fsub{margin-top:18px}
  .filters .frow .btn{flex:1 1 100%}
}