/* The index of words of the final Leaves of Grass, 1891–92 (/edition/1891/words/; tools/whitman_1891_words.py; the 1855's sheet): on the edition's paper and
   in its face (edition.css's --page, --book, --rule-ink), a word's heading, its count, today's spelling beside it, then its lines: the
   page and line, the words before it, the word, the words after. At a desk the word stands in a column of its own down the page; on a
   phone each line wraps, the page and line above it. */

/* the edition's way in (tools/whitman_1891.py, which loads this sheet): "Concordance" beside Search, and under the twelve poems */
.ed-1891 .ed-tool-words{display:inline-block; font:400 .84rem/1 var(--book); letter-spacing:.02em; color:var(--ink); background:var(--page);
  border:1px solid var(--rule-ink); border-radius:999px; padding:.6em 1.1em; text-decoration:none; box-shadow:0 1px 4px rgba(36,29,22,.1)}   /* Search's look (edition.css's .ed-tool-find), never its class */
.ed-1891 .ed-tool-words:hover, .ed-1891 .ed-tool-words:focus-visible{border-color:var(--ink)}
.ed-1891 .ed-contents-words{margin:.9rem 0 0; text-align:center; font:italic 400 .95rem/1.4 var(--book)}
.ed-1891 .ed-contents-words a{color:var(--ink)}

.ed-words #chapter.wi{max-width:58rem; margin:0 auto; padding:8svh 24px 4rem; font-family:var(--book)}   /* over edition.css's #chapter */
.ed-words .wi-head{text-align:center}
.ed-words .wi-back{margin:0 0 2.2rem; font:400 .74rem/1.4 var(--book); letter-spacing:.24em; text-transform:uppercase}
.ed-words .wi-back a{color:var(--soft); text-decoration:none}
.ed-words .wi-back a:hover{color:var(--ink)}
.ed-words h1{margin:0 0 .9rem; font:400 clamp(2rem,3.4vw,2.8rem)/1.1 var(--book); letter-spacing:.01em}
.ed-words .wi-lede{max-width:38rem; margin:0 auto 1.8rem; font:italic 400 clamp(1.02rem,1.25vw,1.15rem)/1.5 var(--book); text-wrap:pretty}

/* the filter */
.ed-words .wi-find{max-width:26rem; margin:0 auto 1.4rem; text-align:left}
.ed-words .wi-label{display:block; margin:0 0 6px; font:400 .68rem/1.4 var(--book); letter-spacing:.26em; text-transform:uppercase; color:var(--soft); text-align:center}
.ed-words .wi-find input{box-sizing:border-box; width:100%; padding:.5em .7em; font:400 1.05rem/1.3 var(--book); color:var(--ink);
  background:color-mix(in srgb, #fff 45%, var(--page)); border:1px solid var(--rule-ink); border-radius:4px}
.ed-words .wi-find input:focus{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:1px}
.ed-words .wi-status{margin:.5em 0 .2em; font:italic 400 .86rem/1.3 var(--book); color:var(--soft); text-align:center}
.ed-words .wi-status:empty{display:none}
.ed-words .wi-found{list-style:none; margin:0; padding:0; max-height:min(46svh, 22rem); overflow:auto; overscroll-behavior:contain}
.ed-words .wi-found:empty{display:none}
.ed-words .wi-found a{display:flex; gap:.55em; align-items:baseline; padding:.4em .45em; border-top:1px solid var(--rule-ink); color:var(--ink); text-decoration:none}
.ed-words .wi-found a:hover, .ed-words .wi-found a:focus-visible{background:color-mix(in srgb, var(--accent) 8%, transparent); outline:none}

/* the letters: they stay at the top of the window as the reader goes down a letter */
.ed-words .wi-letters{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; justify-content:center; gap:.1rem .15rem;
  margin:0 -24px; padding:.55rem 24px; background:var(--page); border-bottom:1px solid var(--rule-ink); font:400 1rem/1 var(--book)}
.ed-words .wi-letters a, .ed-words .wi-letters .off{display:inline-block; min-width:1.55em; padding:.32em .1em; text-align:center; border-radius:3px}
.ed-words .wi-letters a{color:var(--ink); text-decoration:none}
.ed-words .wi-letters a:hover{background:color-mix(in srgb, var(--accent) 8%, transparent)}
.ed-words .wi-letters a[aria-current]{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); border-radius:0}
/* a letter cut into parts (tools/whitman_1891_words.py, BUDGET): each part by its guide words, this one marked as the letters are */
.ed-words .wi-parts{margin:0 0 1.6rem; text-align:center; font:italic 400 .95rem/1.6 var(--book); color:var(--soft)}
.ed-words .wi-parts a{color:var(--ink); text-decoration:none; padding:.1em .15em}
.ed-words .wi-parts a:hover{background:color-mix(in srgb, var(--accent) 8%, transparent)}
.ed-words .wi-parts a[aria-current]{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}
.ed-words .wi-letters .off{color:color-mix(in srgb, var(--ink) 28%, transparent)}

/* a letter, and its words */
.ed-words .wi-body{max-width:52rem; margin:0 auto}
.ed-words .wi-letter{margin:2.2rem 0 1.4rem; font:400 clamp(2.6rem,4vw,3.4rem)/1 var(--book); color:var(--accent); text-align:left}
.ed-words .wd{margin:0 0 1.5rem; scroll-margin-top:3.6rem; border-radius:4px; transition:background-color 1.4s ease}
.ed-words .wd.lit{background:color-mix(in srgb, #f0c75e 26%, transparent); transition:none}
.ed-words .wd h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .6em; margin:0 0 .3rem; font:400 1.28rem/1.25 var(--book)}
.ed-words .hw{font-weight:700; letter-spacing:.005em}
.ed-words .n{font-size:.8rem; color:var(--soft); font-variant-numeric:lining-nums}
.ed-words .today, .ed-words .see-to{font:italic 400 .92rem/1.3 var(--book); color:var(--soft)}
.ed-words .see-to a{color:var(--ink)}
.ed-words .wd.see h3{font-size:1.05rem}
.ed-words .wd.see .hw{font-weight:400}
.ed-words .forms{margin:-.1rem 0 .35rem; font:italic 400 .9rem/1.35 var(--book); color:var(--soft)}
.ed-words .all{margin:.1rem 0 0; font:italic 400 .98rem/1.4 var(--book)}
.ed-words .all a, .ed-words .to-letter{color:var(--ink)}
.ed-words .to-letter{font:italic 400 .9rem/1.3 var(--book); margin-left:auto}

/* a word's lines */
.ed-words .lines{list-style:none; margin:0; padding:0}
.ed-words .lines a{display:grid; grid-template-columns:8.6em minmax(0,1fr); gap:0 .9em; padding:.16rem .35rem; border-radius:3px;
  color:var(--ink); text-decoration:none; font-size:1rem; line-height:1.5}
.ed-words .lines a:hover, .ed-words .lines a:focus-visible{background:color-mix(in srgb, var(--accent) 8%, transparent); outline:none}
.ed-words .lines .at{padding-top:.2em; font-size:.78rem; color:var(--soft); white-space:nowrap}
.ed-words .kw{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr); column-gap:.3em; white-space:nowrap}
/* a long line's ends clipped by the column, fading where they're cut (a short one never reaches the fade) */
.ed-words .pre{display:flex; justify-content:flex-end; overflow:hidden;
  -webkit-mask:linear-gradient(to right, transparent, #000 2.4em); mask:linear-gradient(to right, transparent, #000 2.4em)}
.ed-words .pre > span{flex:none}
.ed-words .mid{white-space:normal}   /* a line with the word twice or more, far apart, wraps between them, never past the page (the 1855's
                                       nowrap ran "the" lines 900 px past a desk's edge; stanza-1891b, 2026-11-02) */
.ed-words .post{overflow:hidden; -webkit-mask:linear-gradient(to left, transparent, #000 2.4em); mask:linear-gradient(to left, transparent, #000 2.4em)}
.ed-words mark{padding:0 .12em; background:rgba(240,199,94,.42); color:inherit; border-radius:2px}
.ed-words details{margin:.15rem 0 0}
.ed-words summary{cursor:pointer; padding:.2rem .35rem; font:italic 400 .9rem/1.4 var(--book); color:var(--soft); list-style:none}
.ed-words summary::-webkit-details-marker{display:none}
.ed-words summary::after{content:" ▾"}
.ed-words details[open] summary{display:none}

.ed-words .wi-foot{max-width:52rem; margin:3.5rem auto 0; padding-top:1rem; border-top:1px solid var(--rule-ink);
  font:italic 400 .92rem/1.5 var(--book); color:var(--soft); text-align:center}
.ed-words .wi-foot p{max-width:40rem; margin:0 auto .6rem; text-wrap:pretty}
.ed-words .wi-foot a{color:var(--ink)}
.ed-words .wi-foot i{font-style:normal}   /* a book's title in an italic line, set roman */

@media (max-width:700px){
  .ed-words #chapter.wi{padding:4svh 16px 3rem}
  .ed-words .wi-back{margin-bottom:1.4rem}
  .ed-words .wd{scroll-margin-top:5.6rem}   /* the letters take two rows here */
  .ed-words .wi-letters{margin:0 -16px; padding:.45rem 10px; font-size:.95rem; gap:0}
  .ed-words .wi-letters a, .ed-words .wi-letters .off{min-width:1.32em; padding:.38em 0}
  .ed-words .lines a{grid-template-columns:1fr; padding:.35rem .2rem; border-top:1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius:0}
  .ed-words .lines .at{padding:0}
  .ed-words .kw{display:block; white-space:normal}
  .ed-words .pre, .ed-words .pre > span, .ed-words .post{display:inline; -webkit-mask:none; mask:none}
  .ed-words .mid{white-space:normal}
}