/* The name page and the pages under it (sister names, middle names, names with a surname), in
   the Deck design (data/names/variants/girl/v2/name.html). Tokens and shared components (card,
   rarity strip, map, places table, collapsed rows, Show all) are in site.css; this file only
   lays out what these pages add. Logical properties throughout (Arabic is right to left).
   Five type sizes only: --t1 13, --t2 15, --t3 18, --t4 26, --t5 display. */

/* ---- the hero card: the name, how to say it, Keep, then the rarity view ---- */
.namepage,.subpage{min-width:0}
.nhero{padding:24px 16px 16px}
@media (min-width:760px){.nhero{padding:40px 40px 24px}}
.nhero .eyebrow{margin-bottom:8px}
.nhero .mean{margin-top:4px}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.hero-deal{font:600 var(--t2)/1.2 var(--text);padding:8px 4px}
.nhero .rarity{margin-top:8px}
.nhero .sent{max-width:none}
@media (min-width:760px){
 .nhero .sent{font-size:var(--t3)}
 .nhero .marks{height:36px}
 .nhero .m.t0{height:36px}
 .nhero .m.t1{height:22px}
 .nhero .m.t2{height:10px}
}
.nhero .map{margin-top:16px}

/* the year scrub: the same view through the years */
.yearbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.yearbar .flabel{margin:0}
.yearbar input{flex:1 1 200px;min-width:0;min-height:32px;accent-color:var(--accent);margin:0}
.yearbar output{font:600 var(--t2)/1.2 var(--text);min-width:14ch}

/* ---- sections: a summary line, then "Show all" ---- */
.namepage>.sec:first-of-type{margin-top:24px}
.h3{margin:24px 0 8px}
.more-body>.h3:first-child{margin-top:8px}
.prose p{font:var(--t3)/1.6 var(--display);max-width:62ch}
.prose p+p{margin-top:12px}
.sec-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px}

/* every place: the shared table, plus the published spelling where it differs */
.places .orig{font-weight:400;color:var(--ink2);margin-inline-start:4px}
.places .sp{font:400 var(--t1)/1.3 var(--text);color:var(--ink2);margin-inline-start:4px}
.places th a{color:var(--ink);text-decoration-color:var(--line)}
.places th a:hover{color:var(--accent);text-decoration-color:currentColor}

/* meaning, origin, pronunciation */
.facts{margin:0;display:grid}
.facts>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
@media (min-width:560px){.facts>div{grid-template-columns:140px minmax(0,1fr);gap:12px}}
.facts dt{font:600 12px/1.6 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.facts dd{margin:0}
.facts dd b{letter-spacing:.04em}
.vars{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px}
.ety{margin-top:12px}
.ety summary,.faq summary{cursor:pointer;font-weight:600;padding:8px 0;color:var(--ink);min-height:40px;display:flex;align-items:center;gap:12px;list-style:none}
.ety summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
/* the same chevron as "Show all": an open-able line must look open-able */
.ety summary::after,.faq summary::after{content:"";flex:none;width:7px;height:7px;border-inline-end:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-2px) rotate(45deg)}
.ety[open] summary::after,.faq[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq summary{justify-content:space-between}
.ety summary:hover,.faq summary:hover{color:var(--accent)}
.ety p{margin:4px 0;max-width:66ch}

/* over time: rank since the first scrub year in up to six places, tables, the long run */
.sms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 24px;margin-top:12px}
.sm{margin:0}
.sm figcaption{font-size:var(--t1);display:block}
.sm .pl{font-weight:600;color:var(--ink)}
.sm .sm-v{color:var(--ink2);display:block}
.sm svg{display:block;width:100%;height:auto;margin-top:2px}
.sm-g,.era-g{stroke:var(--line);stroke-width:1}
.sm-l{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sm-p{fill:var(--accent)}
.sm-d{fill:var(--ink)}
.ax{font:11px var(--text);fill:var(--ink2)}
.sm .ax{font-size:14px}
.ten,.series{font-size:var(--t1)}
.ten{min-width:560px}
.series{max-width:520px}
/* every body cell of these two tables is a figure: .num without a class on each of ~400 cells */
.ten td,.series td{text-align:end;white-space:nowrap}
.ten td:last-child,.series td:last-child{padding-inline-end:0}
.erafig{margin:12px 0 0}
.era{display:block;width:100%;height:auto;max-width:680px}
.era-a{fill:var(--rare)}
.era-l{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round}
.era-n{display:none}
@media (max-width:559px){.era-w{display:none}.era-n{display:block}}

/* full names in a row's panel (middle names, names with a surname) */
.nfull{font:600 var(--t3)/1.3 var(--display);margin-bottom:2px}
.nfull b{color:var(--accent);font-weight:600}
.nfull2{font-size:var(--t2);margin-top:8px}
.nfoot{font-size:var(--t1);color:var(--ink2)}
.nrow-more .nfull+.nfoot{margin-bottom:8px}

/* famous people, questions */
.famous{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 24px}
.famous li{padding:8px 0;border-bottom:1px solid var(--line)}
.fm-n{font:600 var(--t3)/1.25 var(--display)}
.fm-n a{color:var(--ink)}
.fm-n a:hover{color:var(--accent)}
.fm-d{font-size:var(--t1);color:var(--ink2)}
.fm-d .yrs{white-space:nowrap}
.faq{border-bottom:1px solid var(--line)}
.faq p{padding:0 0 12px;max-width:66ch}

/* ---- the pages under a name: a compact hero, then the rows ---- */
.phero{padding:24px 16px}
@media (min-width:760px){.phero{padding:32px 40px}}
.phero h1{font-size:clamp(32px,6vw,48px)}
.phero .say{margin-top:8px}
.phero-intro{margin-top:8px;max-width:66ch;color:var(--ink2)}
.sur-h span{color:var(--accent)}
.subpage>.sec:first-of-type{margin-top:24px}

.surtry{max-width:320px;margin-top:24px}
.cmp{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:760px){.cmp{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
.cmp-n{font-size:var(--t4)}
.cmp-n a{color:var(--ink)}
.cmp-n a:hover{color:var(--accent)}
.cmp-i .sent{margin-top:8px;font-size:var(--t2)}

/* a suggestion row while deck-name.js fetches the rest of its panel (or could not) */
.nrow-wait{font-size:var(--t1);padding-top:4px}