/* Every Girl Name, Deck design: the hub pages (top lists, the map page, trending, origins,
   meanings, styles and their indexes, sources, about, privacy, the 404). Linked by the page
   models' m.css (src/lib/hubpages.mjs). Uses the tokens and shared components of site.css
   (.nrows, .more-sec, .sec, .sumline, .notes, .src, .scope, .chip, .tscroll); this file adds
   only what the hubs need. Logical properties throughout (Arabic is right to left). */

/* ---- the page head: h1, the answer in words, one quiet line of method ---- */
.hub-h{margin-bottom:24px}
.hub-h .eyebrow{margin-bottom:8px}
.hub-h .sumline{margin-top:12px}
.hub-intro{margin-top:8px;max-width:66ch;color:var(--ink2)}
.sec>.hub-intro{margin:-4px 0 12px}
.hub-notes{margin:0 0 16px;max-width:66ch}
.hub-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-weight:600}

/* ---- collapsed name rows: the panel's page-specific lines, and the rarity slot ---- */
.hub-rows{border-top:1px solid var(--line)}
.hub-more>summary{margin-top:8px}
.hub-more .more-body>.hub-rows{border-top:0}
.hub-x{font-size:var(--t1);color:var(--ink2);margin-top:4px;max-width:66ch}
.nrow-line q{color:var(--ink)}

/* ---- the map page: the stage. One name's map (printed for the name the answer is about,
   switched by hubs.js to each name opened below), words first: the sentence and the number,
   then the map pair (side by side at 600px and wider, stacked below, from site.css) ---- */
.mp-stage{margin-bottom:32px;scroll-margin-top:16px}
.mp-view .sent{margin-top:8px}
.mp-view .map{margin-top:16px}
.mp-go{margin-top:12px}
.mp-intro{margin:0 0 16px}
.mp-to{margin-top:8px;font-size:var(--t1)}

/* ---- the map page: sort by rank in a group of places ---- */
.hub-sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.hub-sort .flabel{margin:0;margin-inline-end:4px}

/* ---- compact tables: a name column that takes the room, narrow figure columns ---- */
.hub-table{table-layout:fixed}
.hub-table .c-rank{width:3em}
.hub-table .c-num{width:6em}
.hub-table .c-chg{width:5.5em}
.hub-table .c-strip{width:168px}
.hub-table .c-ref{width:3.5em}
.hub-table .c-keep{width:76px;padding-inline-end:0;text-align:end}
.hub-table td,.hub-table th{vertical-align:middle;overflow-wrap:anywhere}
.hub-table thead th{vertical-align:bottom;overflow-wrap:normal;hyphens:auto}
/* the strip column keeps clear of the figures before it */
.hub-table .c-strip{padding-inline-start:16px}
.tname{font:600 var(--t3)/1.25 var(--display)}
.tname a,.hub-firsts a.fn{color:var(--ink);text-decoration-color:var(--line)}
.tname a:hover,.hub-firsts a.fn:hover{color:var(--accent);text-decoration-color:currentColor}
.orig{font:400 var(--t1)/1 var(--text);color:var(--ink2);margin-inline-start:4px}
.c-rank{color:var(--ink2)}
.chg-up{color:var(--accent-d)}
.chg-down,.chg-same{color:var(--ink2)}
.chg-new{color:var(--accent);font-weight:600}
.hub-table abbr,.hub-grid abbr{text-decoration:none;cursor:help}
@media (max-width:759px){
 .hub-table .c-strip,.hub-table .c-ref{display:none}
}
@media (max-width:479px){
 .hub-table{font-size:var(--t1)}
 .hub-table .c-num{width:4.5em}
 .hub-table .c-chg{width:3.5em}
 .hub-table .c-keep{width:68px}
 .hub-table th,.hub-table td{padding-inline-end:8px}
 .tname{font-size:var(--t2)}
}

/* ---- the rarity strip in a table cell: marks only, the three tones ---- */
.tstrip{display:flex;align-items:flex-end;gap:1px;height:16px;border-bottom:1px solid var(--line)}
.tstrip i{flex:1 1 0;min-width:0;height:5px;border-radius:1px 1px 0 0;background:var(--rare)}
.tstrip .t0{height:16px;background:var(--loved)}
.tstrip .t1{height:10px;background:var(--common)}
.tstrip .tn{background:none;border:1px solid var(--line);border-bottom:0}

/* ---- top lists: the index of places, grouped; the years of one place ---- */
.hub-places .grp th{padding-top:24px;font:600 12px/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hub-places tbody:first-of-type .grp th{padding-top:12px}
.hub-places .c-year{width:5em}
.hub-places .c-list{width:7em;color:var(--ink2)}
.hub-places tbody th[scope=row]{font-weight:600}
/* phones drop the list column; auto layout so the group rows' colspan leaves no empty column */
@media (max-width:479px){.hub-places{table-layout:auto}.hub-places .c-list{display:none}}
.hub-years ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 16px}
.hub-years a,.hub-years span{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:36px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;font:600 var(--t1)/1 var(--text);color:var(--ink);text-decoration:none}
.hub-years a:hover{border-color:var(--accent);color:var(--accent)}
.hub-years [aria-current]{background:var(--ink);border-color:var(--ink);color:var(--card)}

/* ---- the map page: ranks in eighteen places; number 1 in each place ---- */
.hub-grid{min-width:880px;font-size:var(--t1)}
.hub-grid th,.hub-grid td{padding-inline-end:8px;vertical-align:middle}
.hub-grid th:first-child{position:sticky;inset-inline-start:0;z-index:1;background:var(--ground);min-width:120px}
.hub-grid .tname{font-size:var(--t2)}
.hub-grid .strong{color:var(--accent);font-weight:700}
.hub-grid .st{white-space:nowrap;color:var(--ink2)}
.hub-firsts{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 24px}
.hub-firsts li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.hub-firsts .pl{font-size:var(--t1);color:var(--ink2)}
.hub-firsts .fn{font:600 var(--t3)/1.25 var(--display);color:var(--ink)}

/* ---- index pages: links as chips; the styles with their rules ---- */
.hub-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.hub-chips a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font:600 var(--t2)/1.1 var(--text)}
.hub-chips a:hover{border-color:var(--accent);color:var(--accent)}
.hub-chips .n{font-weight:400;color:var(--ink2)}
.hub-first{border-top:0;padding-top:0}
.hub-styles{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px}
@media (min-width:760px){.hub-styles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-styles li{padding:12px 0;border-bottom:1px solid var(--line)}
.hub-styles a{font:600 var(--t3)/1.25 var(--display);color:var(--ink);text-decoration-color:var(--line)}
.hub-styles a:hover{color:var(--accent);text-decoration-color:currentColor}
.hub-styles .n{margin-inline-start:8px;font-size:var(--t1);color:var(--ink2)}
.hub-styles p{margin-top:2px;max-width:60ch;font-size:var(--t1);color:var(--ink2)}
.sec>h2 a{color:inherit;text-decoration-color:var(--line)}
.sec>h2 a:hover{color:var(--accent)}

/* ---- a style's rule ---- */
.hub-rule{margin:0 0 24px;padding:12px 16px;max-width:66ch;background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.hub-rule h2{margin-bottom:4px;font:600 12px/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.hub-rule .src{margin-top:8px}

/* ---- sources, about, privacy: reading ---- */
.hub-reading{max-width:66ch}
.hub-prose{margin-top:24px}
.hub-prose h2{margin-bottom:8px}
.hub-prose p{margin:8px 0;font:var(--t3)/1.6 var(--display)}
.hub-nous{margin:24px 0 8px;color:var(--ink2)}
.hub-src{font-size:var(--t1)}
.hub-src tbody th{font:600 var(--t2)/1.3 var(--text)}
.hub-src tbody th .scope{margin-inline-start:4px}
.hub-note{display:block;margin-top:4px;font:400 var(--t1)/1.4 var(--text);color:var(--ink2)}
.hub-src .num{white-space:nowrap}
@media (max-width:639px){.sec .hub-src{min-width:600px}}