/* The index pages in the Deck design: every girl's name A to Z (/girl-names/), the letter pages
   (/letter/<l>/) and the surname index (/last-name/). Tokens, rows (.nrows / .nrow), Keep and
   "Show all" are site.css's; this file only lays the pages out. Logical properties (Arabic). */
.ixpage{min-width:0}
.ix-head .lede{margin-top:8px}

/* the find box (names, surnames) */
.ix-find{margin-top:16px}
.ix-find input[type=search]{max-width:360px}
.ix-find input[type=search]{-webkit-appearance:none;appearance:none}
/* the clear button in the brand's quiet ink, not the browser's blue */
.ix-find input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:20px;height:20px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%236b5560' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ix-hint{margin-top:8px}
.ix-status{margin-top:12px;font-size:var(--t2)}
.ix-status a{font-weight:600}

/* the letter bar: sticky on the A to Z page, one scrolling row on phones */
.ix-bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:4px;margin-top:16px;padding:8px 0;background:var(--ground);border-bottom:1px solid var(--line)}
.ix-bar a,.ix-bar span{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;border-radius:999px;font:600 var(--t1)/1 var(--text)}
.ix-bar a{color:var(--ink);text-decoration:none;border:1px solid var(--line);background:var(--card)}
.ix-bar a:hover{border-color:var(--accent);color:var(--accent)}
.ix-bar a.cur{border-color:var(--accent);color:var(--accent)}
.ix-bar a.off{color:var(--ink2);border-style:dashed;background:none}
.ix-bar span{color:var(--ink2);opacity:.45}
.ix-bar span.on{opacity:1;background:var(--ink);color:var(--card)}
@media (max-width:759px){
 .ix-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
 .ix-bar::-webkit-scrollbar{display:none}
}
/* wider: all 26 letters on one line, shrinking a little when the column is narrow */
@media (min-width:760px){
 .ix-bar{flex-wrap:nowrap;justify-content:space-between;gap:2px}
 .ix-bar a,.ix-bar span{flex:0 1 36px;min-width:22px}
}

/* one letter of the A to Z: a header line, then the collapsed rows */
.ix-l{padding-top:24px;scroll-margin-top:64px;content-visibility:auto;contain-intrinsic-size:auto 1600px}
.ix-l:first-of-type{padding-top:16px}
.ix-lh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.ix-lh h2{font-size:var(--t4)}
.ix-n{font-size:var(--t1);color:var(--ink2)}
.ix-go{margin-inline-start:auto;font-size:var(--t1)}
.ix-wait,.ix-err{font-size:var(--t1);padding-top:4px}

/* a letter page: the big letter beside the h1, the other letters, the rows */
.lt-head{display:flex;align-items:center;gap:16px}
.lt-big{font:600 var(--t5)/1 var(--display);color:var(--accent);flex:none;min-width:.7em;text-align:center}
.lt-bar{position:static;margin-bottom:8px}
.ix-all{margin-top:24px;font-weight:600}

/* the surname index: groups by beats, names as a grid of links */
.sn-g{padding-top:32px}
.sn-g:first-of-type{padding-top:24px}
.sn-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 24px;margin-top:4px}
.sn-list li{border-bottom:1px solid var(--line)}
.sn-list a{display:block;padding:10px 0;font:600 var(--t3)/1.2 var(--display);color:var(--ink);text-decoration:none}
.sn-list a:hover{color:var(--accent)}
.sn-g .more-sec{margin-top:4px}
.sn-g .more-body{padding-top:0}