/* words.css: the word pages and the search home. Design: ../readme-pageDesign.txt (round 8 picks). */
:root{--bg:#fff;--cov:#fff;--sheet:#fff;--ink:#2b2b2b;--soft:#666;--acc:#8e2766;--hw:#57285a;--opp:#b04f00;--line:rgba(43,43,43,.2);--tab:#eddce7;--tabink:#2b2b2b;--card:#f7f0f4;
  --hf:'Fraunces',Georgia,serif;--bf:'Source Serif 4',Georgia,serif;--lf:'Barlow Condensed','Arial Narrow',sans-serif;--uf:'Inter',system-ui,sans-serif;
  --rule:color-mix(in srgb,var(--ink) 32%,transparent);--faint:color-mix(in srgb,var(--line) 40%,transparent);--ease:cubic-bezier(.2,.8,.2,1);--out:cubic-bezier(.22,1,.36,1);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#371b15;--cov:#5b2e23;--sheet:#412119;--ink:#f6e9e4;--soft:rgba(246,233,228,.74);--acc:#e9b3ea;--hw:#fbefe9;--opp:#ffa38a;--line:rgba(246,233,228,.2);--tab:#7b5566;--tabink:#fbefe9;--card:#4a261d;color-scheme:dark}}
:root[data-theme=dark]{--bg:#371b15;--cov:#5b2e23;--sheet:#412119;--ink:#f6e9e4;--soft:rgba(246,233,228,.74);--acc:#e9b3ea;--hw:#fbefe9;--opp:#ffa38a;--line:rgba(246,233,228,.2);--tab:#7b5566;--tabink:#fbefe9;--card:#4a261d;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.5 var(--bf);-webkit-font-smoothing:antialiased}
p,h1,h2,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:color-mix(in srgb,var(--acc) 26%,transparent)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

/* links: a faint underline on reading-size text; display-size words change color instead */
.run a,.def a,.bph a,.fam a,.cat span a,.meta a,.foot a,.sl em a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 17%,transparent);text-decoration-thickness:max(1px,.06em);text-underline-offset:.2em;transition:color .18s,text-decoration-color .18s}
a:active{background:color-mix(in srgb,var(--acc) 16%,transparent);border-radius:3px}
@media (hover:hover){a:hover{color:var(--acc)}.run a:hover,.bph a:hover{text-decoration-color:currentColor}}

/* header: IDEA.org / Words (/ the word as a search field on desktop), the light/dark button */
.hdr{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:12px;height:46px;padding:0 18px;background:var(--cov);font:600 13px/1 var(--uf);transition:background-color .25s,box-shadow .25s}
.scd .hdr{background:color-mix(in srgb,var(--cov) 94%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 9%,transparent),0 12px 28px -14px rgba(0,0,0,.3)}
.crumb{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.crumb .mark{color:var(--ink);font:800 14px/1 var(--uf)}
.crumb a{color:var(--soft)}
.crumb i{font-style:normal;color:var(--soft);opacity:.55}
.palb{flex:none;width:24px;height:24px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:linear-gradient(135deg,var(--ink) 50%,var(--acc) 50%);cursor:pointer;transition:transform .16s var(--ease)}
.palb:active{transform:scale(.86)}
.dko{display:none!important}

/* the first screen: headword, gloss, definition; senses as tabs down the right edge */
.cov{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 46px);background:var(--cov)}
.cov.short{min-height:0;padding-bottom:6px}
.cin{--hs:150px;display:flex;flex-direction:column;flex:1;padding:12px 94px 0 18px;container-type:inline-size}
.notabs .cin{padding-right:18px}
/* --w: the word's width in em, measured from the font when the page is built (build_site.py em_width); it fills the column, up to a cap */
/* --d, --l (big()): room below for descenders past the line box (its bottom is .07em under the baseline at line-height .86, .11em at .95, .13em at .98) and on the left for a hanging j */
.hw{margin-left:calc(var(--l,0) * 1em - 3px);padding-bottom:clamp(0px,calc((var(--gx,9999px) - var(--x,0) * 1em) * 99),max(0px,calc((var(--d,0) - .07) * 1em)));color:var(--hw);font:900 min(var(--hs),calc(100cqi * .98 / var(--w)))/.86 var(--hf);letter-spacing:-.045em;white-space:nowrap;cursor:default}
.gl{margin-top:12px;font:italic 400 21px/1.25 var(--bf);color:var(--acc)}
/* the gloss and the headword's drop letters (build_site.py headword()): the headword gets room below only when the gloss
   (--gx px wide) reaches where the next drop starts (--x em); a first letter that drops gets a notch: the gloss starts
   at --i em, unless it has to go below anyway. "* 99" turns the difference into a switch. */
.gl.in{margin-left:clamp(0px,calc(var(--i) * min(var(--hs),calc(100cqi * .98 / var(--w))) - 3px - (var(--gx,0px) - var(--x,99) * min(var(--hs),calc(100cqi * .98 / var(--w)))) * 99),calc(var(--i) * min(var(--hs),calc(100cqi * .98 / var(--w))) - 3px))}
.tz{flex:1;margin-top:20px;padding:12px 0 28px;border-top:1.5px solid var(--rule)}
/* in dark, the reading area is its own color band, edge to edge, instead of a rule */
:root[data-theme=dark] .tz{margin:20px -94px 0 -18px;padding:12px 94px 28px 18px;border-top:0;background:var(--sheet)}
:root[data-theme=dark] .notabs .tz{margin-right:-18px;padding-right:18px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tz{margin:20px -94px 0 -18px;padding:12px 94px 28px 18px;border-top:0;background:var(--sheet)}
  :root:not([data-theme=light]) .notabs .tz{margin-right:-18px;padding-right:18px}}
.def p{font:400 19px/1.42 var(--bf)}
.def p+p{margin-top:9px}
.def i{color:var(--acc)}
.tapped .tp:not([hidden]){animation:tpin .45s var(--out)}   /* a short, soft slide: changing tabs shouldn't jolt */
@keyframes tpin{from{opacity:0;transform:translateX(6px)}}
.spg{position:relative}
.spx{position:absolute;top:-4px;right:-2px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--acc);color:var(--bg);box-shadow:0 6px 16px -6px rgba(0,0,0,.45);cursor:pointer;transition:transform .16s var(--ease)}
.spx:active{transform:scale(.86)}
.spx svg{width:17px;height:17px}
.spw{margin-top:8px;padding-left:calc(var(--l,0) * 1em);padding-bottom:max(0px,calc((var(--d,0) - .11) * 1em));font:900 min(58px,calc(100cqi * .98 / var(--w)))/.95 var(--hf);letter-spacing:-.045em}
.spg .sg2{margin-top:6px}
.rail{position:absolute;top:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;justify-content:space-evenly;width:84px;max-height:calc(100svh - 46px);padding:8px 0 132px}
.rail button{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;flex:0 1 84px;min-height:44px;margin-left:10px;padding:0 6px 0 10px;border:0;border-radius:11px 0 0 11px;background:var(--tab);color:var(--tabink);text-align:left;box-shadow:-3px 2px 8px rgba(0,0,0,.12);cursor:pointer;
  transform-origin:100% 50%;transition:margin .4s var(--out),transform .18s var(--ease),background-color .22s,color .22s,box-shadow .3s var(--ease)}
.rail button:active{transform:scale(.97)}
.rail button[aria-selected=true]{margin-left:0;background:var(--ink);color:var(--bg);box-shadow:-10px 8px 22px -10px rgba(0,0,0,.45)}
.rail b{max-width:100%;overflow:hidden;font:700 13px/1 var(--lf);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;text-overflow:clip}
.rail span{max-width:100%;overflow:hidden;font:italic 400 13px/1.15 var(--bf);opacity:.78;white-space:nowrap;text-overflow:ellipsis}
.card{display:none}

/* below the first screen. Phone: one column in this order; desktop: two columns (see the media query) */
.below{display:flex;flex-direction:column;padding:6px 18px 0}
.colA,.colB{display:contents}
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}.ad-tall{order:8}
.sec{padding:22px 0 26px;border-top:1.5px solid var(--rule)}
.lab{display:block;font:700 13px/1.1 var(--lf);letter-spacing:.15em;text-transform:uppercase;color:var(--acc)}
.slw{margin-top:8px;padding-bottom:max(0px,calc((var(--d,0) - .13) * 1em));font:900 40px/.98 var(--hf);letter-spacing:-.045em}
.sg2{margin-top:4px;font:italic 400 16px/1.3 var(--bf);color:var(--soft)}
.gl2{margin-top:14px;border-top:1px solid var(--faint)}
.gl2 li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--faint)}
.gl2 a{flex:none;font:600 19px/1.2 var(--hf)}
.gl2 span{min-width:0;font:italic 400 14px/1.3 var(--bf);color:var(--soft)}
.run{margin-top:12px;line-height:1.45}
.run i,.op2 i{font-style:normal;color:var(--soft)}
.op2{margin-top:16px}
.op2:first-of-type{margin-top:10px}
.nm{display:block;margin-bottom:3px;font:600 12px/1.3 var(--uf);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.opx{font:900 40px/1.05 var(--hf);letter-spacing:-.045em;color:var(--opp)}
.opx .ohw{font-size:26px;color:var(--hw)}
.opx svg{display:inline-block;width:.5em;height:.5em;margin:0 .16em;fill:none;stroke:var(--soft);stroke-width:2.2;stroke-linecap:round}
.bph{margin-top:10px}
.bph li{padding:5px 0;line-height:1.3}
.bph span{display:block;font:13px/1.3 var(--uf);color:var(--soft)}
.cat{margin-top:8px}
.cat li{display:grid;gap:2px;padding:8px 0;border-top:1px solid var(--faint)}
.cat b{font:600 19px/1.2 var(--hf)}
.cat span{font:14.5px/1.4 var(--bf);color:var(--soft)}
.fam p{margin-top:10px}
.meta{display:grid;grid-template-columns:100px minmax(0,1fr);gap:5px 12px;margin-top:10px;font:13px/1.4 var(--uf);color:var(--soft)}
.meta dt{font-weight:700;color:var(--ink)}
.foot{order:9;padding:16px 0 150px;border-top:1px solid var(--rule);font:13px/1.6 var(--uf);color:var(--soft)}
.foot p+p{margin-top:4px}

/* ads: shown only once the ad script has loaded (html.ads); blocked or unfilled, nothing shows and nothing moves */
.ad{display:none}
.ads .ad{display:grid;justify-items:center;gap:7px}
.ad>span{font:600 10px/1 var(--uf);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.adb{display:grid;place-items:center;max-width:100%;background:color-mix(in srgb,var(--ink) 9%,var(--bg));color:var(--soft);font:500 12px/1 var(--uf)}
.adb:empty::after{content:attr(data-size)}
.ads .ad-in{margin:0 -18px 30px;padding:12px 16px 16px;border-block:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--bg))}
.ad-tall{display:none!important}
.adbar{display:none}
.ads .adbar{display:flex;justify-content:center;padding:6px 0;background:var(--bg);box-shadow:0 -6px 18px rgba(0,0,0,.14);animation:barin .5s .35s var(--ease) both}
@keyframes barin{from{transform:translateY(110%)}}

/* search: a field pinned to the bottom of a phone screen, suggestions above it */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:8;padding-bottom:env(safe-area-inset-bottom,0px)}
.dock .srch{position:absolute;left:16px;right:16px;bottom:calc(100% + 14px)}
.srch{position:relative;margin:0}
.srch label{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:16px;background:color-mix(in srgb,var(--ink) 7%,var(--bg));color:var(--soft);cursor:text;transition:background-color .2s,box-shadow .25s var(--ease)}
.srch label>svg{flex:none;display:block;transition:color .2s,transform .25s var(--ease)}
.srch input{flex:1;min-width:0;width:100%;height:auto;padding:0;border:0;background:none;color:var(--ink);font:500 16px/normal var(--uf);outline:0;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.srch input::placeholder{color:var(--soft);opacity:1}
.srch:focus-within label{background:var(--bg);box-shadow:0 0 0 2px var(--acc),0 10px 26px -10px rgba(0,0,0,.3)}
.srch:focus-within label>svg{color:var(--acc);transform:scale(1.1)}
.dock .srch label{height:48px;border-radius:24px;padding:0 18px;background:var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),0 14px 34px -8px rgba(0,0,0,.35)}
.dock .srch input{font-size:17px}
.sclr{display:none;flex:none;place-items:center;width:26px;height:26px;margin-right:-4px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 30%,var(--bg));color:var(--bg);cursor:pointer}
.sclr svg{width:12px;height:12px}
.srch:has(input:not(:placeholder-shown)) .sclr{display:grid}
.sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;padding:6px;border-radius:16px;background:var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 18px 40px -12px rgba(0,0,0,.45)}
.dock .sug{top:auto;bottom:calc(100% + 10px);flex-direction:column-reverse}
.sug li{min-width:0;padding:9px 12px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:10px;cursor:pointer;font:400 17px/26px var(--bf);color:var(--soft)}
.sug li b{font-weight:700;color:var(--ink)}
.sug li.on{background:color-mix(in srgb,var(--acc) 13%,transparent)}
@media (hover:hover){.sug li:hover{background:color-mix(in srgb,var(--acc) 13%,transparent)}}

/* desktop: the entry with the senses listed beside it; two columns below; search in the header as the last crumb */
@media (min-width:900px){
  body{font-size:17.5px}
  .hdr{height:64px;padding:0 max(34px,calc(50vw - 606px));font-size:14px}
  .dko{display:inline!important}
  form.dko{display:block!important}
  .hdr .srch{width:220px}
  .hdr .srch input{font:600 14px/normal var(--uf)}
  .dock{display:none}
  .cov{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;align-items:start;min-height:0;padding:24px max(34px,calc(50vw - 606px)) 52px}
  .cin,.notabs .cin{--hs:190px;padding:0}
  :root .tz,:root:not([data-theme=light]) .tz,:root[data-theme] .tz,:root:not([data-theme=light]) .notabs .tz,:root[data-theme] .notabs .tz{margin:24px 0 0;padding:12px 0 0;border-top:1.5px solid var(--rule);background:none}
  .def p{font-size:20px}
  .rail,.spg{display:none}
  .card{display:block;align-self:start;margin-top:6px;padding:22px 26px 10px;border-radius:16px;background:var(--card)}
  .sl li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--faint)}
  .sl li:last-child{border-bottom:0}
  .sl .lb{font:700 12px/1.1 var(--lf);letter-spacing:.15em;text-transform:uppercase;color:var(--acc)}
  .sl strong{display:block;font:600 19px/1.2 var(--hf)}
  .sl em{display:block;font:italic 14px/1.3 var(--bf);color:var(--soft)}
  .below{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;align-items:start;padding:44px max(34px,calc(50vw - 606px)) 0}
  .colA,.colB{display:block}
  .colB{align-self:stretch}
  .ad-in,.adbar{display:none!important}
  .ads .ad-tall{display:grid!important;margin:10px 0 30px;padding:12px 16px 16px;border:1px solid var(--line);border-radius:14px}
  .foot{grid-column:1/-1;padding:22px 0 56px}
  .bph,.cat,.fam p,.meta{max-width:46em}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* print: a separate block made for paper, three columns set by the page (Safari prints CSS columns as one) */
.prt{display:none}
@media print{
  body{background:#fff;color:#111}
  body>:not(.prt){display:none!important}
  .prt{display:block;color:#111;font:7.5pt/1.36 var(--bf);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prt p,.prt h1,.prt h3,.prt ul,.prt dl{margin:0}
  .prt i{font-style:italic;color:#555}
  .p-nav{margin-bottom:8pt!important;padding-bottom:3pt;border-bottom:.5pt solid #b8b8b8;font:600 6.5pt/1 var(--uf);letter-spacing:.06em;color:#555}
  .p-hw{font:900 26pt/.95 var(--hf);letter-spacing:-.045em;color:#57285a}
  .p-cl{margin:2pt 0 8pt!important;font:italic 10pt/1.2 var(--bf);color:#8e2766}
  .p-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-col{min-width:0;padding:0 7pt}
  .p-col:first-child{padding-left:0}
  .p-col:last-child{padding-right:0}
  .p-col+.p-col{border-left:.5pt solid #dadada}
  .p-col>:first-child{margin-top:0!important;padding-top:0!important;border-top:0!important}
  .p-dp+.p-dp{margin-top:2pt!important}
  .p-dp i{color:#8e2766}
  .p-top,.p-sec{margin-top:5pt!important;padding-top:4pt;border-top:.5pt solid #b8b8b8}
  .p-sec h3{margin-bottom:1.5pt;font:700 5.8pt/1.2 var(--uf);letter-spacing:.14em;text-transform:uppercase;color:#8e2766}
  .p-sn,.p-op{break-inside:avoid;padding:1.2pt 0}
  .p-lb{color:#8e2766}
  .p-ax{display:block;font:600 5.8pt/1.35 var(--uf);letter-spacing:.08em;text-transform:uppercase;color:#555}
  .p-ox{font:900 9.5pt/1.2 var(--hf);color:#b04f00}
  .p-ox span{color:#57285a}
  .p-meta{display:grid;grid-template-columns:44pt minmax(0,1fr);gap:1pt 6pt;margin-top:5pt!important;padding-top:4pt;border-top:.5pt solid #b8b8b8;font:6pt/1.35 var(--uf);color:#555}
  .p-meta dt{font-weight:700;color:#111}
  .p-meta dd{margin:0}
  .p-foot{margin-top:9pt!important;padding-top:3pt;border-top:.5pt solid #b8b8b8;font:6.5pt/1.4 var(--uf);color:#555}
}