/* BL Guide: /maps, the interactive map hub. Loaded after anomalies.css (title, stats, chips). */
.mapsel { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .6rem; margin: 1.5rem 0 1rem; }
.mapsel button { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .55rem; border: 1px solid var(--h-line); background: var(--h-panel); text-align: left; color: var(--h-ink2); transition: border-color 160ms ease, background 160ms ease; }
.mapsel button:hover { border-color: var(--h-line-hi); }
.mapsel button[aria-selected="true"] { border-color: var(--h-ink); background: oklch(0.17 0.005 250); }
.mapsel img { width: 6.5rem; aspect-ratio: 16 / 10; object-fit: cover; }
.mapsel b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; color: var(--h-ink); line-height: 1.05; }
.mapsel small { font-size: .8125rem; color: var(--h-ink3); }
.st { position: absolute; top: .55rem; right: .55rem; font-style: normal; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .14rem .45rem; }
.st--live { background: var(--h-sell); color: #fff; }
.st--soon { border: 1px solid var(--mark); color: var(--mark); }
.mapview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.mapview[hidden] { display: none; }
.mapimg { margin: 0; border: 1px solid var(--h-line); background: #000; }
.mapimg img { display: block; width: 100%; height: auto; }
.mapimg figcaption { padding: .55rem .75rem; font-size: .8125rem; color: var(--h-ink3); border-top: 1px solid var(--h-line); }
.locs { border: 1px solid var(--h-line); background: var(--h-panel); padding: 1rem 1.1rem; }
.locs h2 { font-size: 1rem; margin-bottom: .7rem; }
.locs ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.locs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem; padding: .45rem 0; border-bottom: 1px solid var(--h-line); }
.locs li b { color: var(--h-ink); font-weight: 600; font-size: .9375rem; }
.locs li span { grid-column: 1; font-size: .75rem; color: var(--h-ink3); }
.locs li small { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .75rem; color: var(--h-ink2); text-align: right; }
.locs li small.no { color: oklch(0.45 0 0); }
.go { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--h-ink); color: oklch(0.12 0 0); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.go:hover { background: oklch(0.88 0 0); }
#p-pyr { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); }
.soon { border: 1px dashed var(--mark); background: oklch(0.82 0.12 210 / .05); padding: 1.1rem 1.2rem; display: grid; gap: .7rem; justify-items: start; }
.soon b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; text-transform: uppercase; color: var(--mark); }
.soon p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--h-ink2); }
.pyrgal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.pyrgal figure { margin: 0; border: 1px solid var(--h-line); }
.pyrgal img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pyrgal figcaption { padding: .3rem .5rem; font-size: .75rem; color: var(--h-ink3); }
.layers { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.5rem; padding: .9rem 1.1rem; border: 1px solid var(--h-line); background: var(--h-panel); }
.layers > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.layers > div span { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .6rem; border: 1px dashed var(--h-line-hi); font-size: .8125rem; color: var(--h-ink2); }
.layers em { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--h-ink3); }
.layers .k { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); }
@media (max-width: 64rem) { .mapview, #p-pyr { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 46rem) { .pyrgal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mapsel button { grid-template-columns: 5rem minmax(0, 1fr); } .mapsel img { width: 5rem; } }

/* hub: the short summary next to each map */
.locs .sum { margin: 0 0 .9rem; font-size: .9375rem; line-height: 1.6; color: var(--h-ink2); }
.locs .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 1rem; padding: 0; list-style: none; background: var(--h-line); border: 1px solid var(--h-line); }
.locs .nums li { display: block; padding: .6rem .7rem; background: oklch(0.13 0.005 250); border: 0; font-size: .75rem; color: var(--h-ink3); }
.locs .nums b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--h-ink); line-height: 1.1; }

/* a map page: the status tag inline, the locations grid, the text sections */
.st--inline { position: static; display: inline-block; }
.h2c { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 2.2rem 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--h-line); }
.h2c h2 { font-size: 1.25rem; }
.h2c p { margin: 0; font-size: .8125rem; color: var(--h-ink3); }
.locgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; }
.loc { display: flex; flex-direction: column; border: 1px solid var(--h-line); background: var(--h-panel); }
.loc > img, .loc > .nopic { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--h-line); }
.loc > .nopic { display: grid; place-items: center; font-size: .75rem; }
.loc > div { padding: .75rem .85rem .85rem; display: grid; gap: .35rem; }
.loc h3 { font-size: 1.05rem; line-height: 1.1; }
.loc p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--h-ink2); }
.loc small { font-size: .75rem; color: var(--h-ink3); }
.loc--none h3 { color: var(--h-ink2); }
.loc .tags { display: flex; gap: .3rem; }
.loc .tags em { font-style: normal; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .4rem; border: 1px solid var(--h-line-hi); color: var(--h-ink2); }
.loc .tags .ch--new { border-color: var(--mark); color: var(--mark); }
.loc .tags .ch--expanded { border-color: var(--h-green); color: var(--h-green); }
.loc .more { display: flex; gap: .3rem; margin-top: .2rem; }
.loc .more img { width: 4.2rem; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--h-line); }
.soon--wide { margin-top: 1.8rem; }
.secs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 1.5rem; }
@media (max-width: 64rem) { .secs { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* the map page frame shows each picture whole: the official map is nearly square */
.sb .view.mapframe { background: #000; }
.sb .view.mapframe img.fill { object-fit: contain; animation: none; }