/* AtlasApp: the atlas as an app on a phone (see atlas-app.js).
 *
 * Everything here is scoped to html.am, which the script sets when the window is 860 px wide or
 * less, before the page body is parsed. The map pages are recognised by their own structure (a
 * <div> straight under main.wide with <aside> columns), so the layout is right at first paint:
 *
 *   top bar      the page's name; back and share on the right
 *   centre       the category row, the item strip, the caption, then the map, filling the screen
 *   sheet        the side columns and the story panels, one page at a time, dragged between a
 *                strip (--am-mini), half height and full height; --sh is its current height
 *   tab bar      Atlas, Land, Time, Peoples, More
 *
 * The page's own @media rules for narrow screens stack the columns; these rules win over them
 * (with !important where a page set the geometry) and leave the desktop layout untouched.
 */
html{--am-top:0px;--am-bot:0px;--am-mini:62px;--sh:62px;--accent:#A3305E} /* :root on a page sets its own accent; this is the fallback (the names page has none) */
html.am{--am-top:calc(50px + env(safe-area-inset-top, 0px));--am-bot:calc(56px + env(safe-area-inset-bottom, 0px));-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.am-tabs,.am-more,.am-sheet,.am-tip,.am-toast,.am-act{display:none}
.am-ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* page to page, a cross-fade instead of a white flash (Chrome 126+, Safari 18.2+) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
}
.am-tabs{view-transition-name:am-tabs}
html.am body>header{view-transition-name:am-top}

/* ---------------------------------------------------------------- the two bars */
html.am body{padding-top:var(--am-top);padding-bottom:calc(var(--am-bot) + 8px)}
html.am body>header{position:fixed;top:0;left:0;right:0;z-index:70;padding-top:env(safe-area-inset-top, 0px);background:var(--sheet);border-bottom:1px solid var(--hair)}
html.am body>header .bar{display:flex;max-width:none;height:50px;margin:0;padding:0 6px 0 12px;flex-wrap:nowrap;align-items:center;gap:10px}
html.am body>header a{text-decoration:none}
html.am body>header .brand{display:block;flex:none;margin:0;width:30px;height:30px;border-radius:8px;overflow:hidden;font-size:0;color:transparent;background:url(app/icon-192.png) center/cover;box-shadow:0 0 0 1px var(--hair)}
html.am body>header nav{flex:1 1 auto;min-width:0;display:flex}
html.am body>header nav a{display:none}
html.am body>header nav a[aria-current]{display:block;font:400 1.22rem/1.2 var(--f-word);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the home page names the atlas itself */
html.am body>header:not(:has(nav a[aria-current])) nav::before{content:"Understanding South Asia";font:400 1.22rem/1.2 var(--f-word);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.am .am-act{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer;padding:0}
html.am .am-act[hidden]{display:none}
html.am .am-act:active{background:var(--wash)}
html.am footer{padding-bottom:12px}

html.am .am-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--am-bot);padding-bottom:env(safe-area-inset-bottom, 0px);background:var(--sheet);border-top:1px solid var(--hair)}
html.am .am-tabs>*{all:unset;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-3);font:500 .68rem/1 var(--f-body);letter-spacing:.01em;cursor:pointer;touch-action:manipulation;min-width:0}
html.am .am-tabs>* span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.am .am-tabs>[aria-current]{color:var(--accent);font-weight:600}
html.am .am-tabs>[aria-current] .am-ic{stroke-width:2.1}
html.am .am-tabs>*:active{background:var(--wash)}

/* ---------------------------------------------------------------- "More": the whole atlas */
html.am .am-more{display:block;position:fixed;inset:0;z-index:80}
html.am .am-more[hidden]{display:none}
.am-more .am-scrim{position:absolute;inset:0;background:rgba(10,12,20,.42);opacity:0;transition:opacity .22s}
.am-more.open .am-scrim{opacity:1}
.am-msheet{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow:auto;overscroll-behavior:contain;background:var(--sheet);border-radius:18px 18px 0 0;padding:0 16px calc(18px + env(safe-area-inset-bottom, 0px));transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.am-more.open .am-msheet{transform:none}
.am-msheet h2{font:600 .72rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:14px 2px 8px}
.am-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.am-grid a{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;align-items:center;padding:10px 11px;border:1px solid var(--hair);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--paper);touch-action:manipulation}
.am-grid a .am-ic{grid-row:1 / span 2;color:var(--accent)}
.am-grid a b{font:400 1rem/1.2 var(--f-word)}
.am-grid a small{color:var(--ink-3);font-size:.72rem;line-height:1.25}
.am-grid a[aria-current]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.am-rows{display:grid;gap:6px}
.am-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--hair);border-radius:12px;background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation}
.am-row[hidden]{display:none}
.am-row .am-ic{color:var(--accent)}
.am-row span{display:flex;flex-direction:column;gap:1px;min-width:0}
.am-row b{font-weight:600;font-size:.92rem}
.am-row small{color:var(--ink-3);font-size:.76rem;line-height:1.3}
.am-row .am-bar{height:4px;border-radius:2px;background:var(--wash);margin-top:5px;overflow:hidden}
.am-row .am-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.am-fine{color:var(--ink-3);font-size:.76rem;margin:14px 2px 0}
.am-grab{display:grid;place-items:center;height:22px;cursor:grab;touch-action:none}
.am-grab i{width:38px;height:5px;border-radius:3px;background:var(--hair)}

/* ---------------------------------------------------------------- the map pages */
/* the page's grid: under the top bar, above the sheet's strip */
html.am main.wide>div:has(>aside){position:fixed!important;top:var(--am-top)!important;left:0;right:0;bottom:calc(var(--am-bot) + var(--am-mini))!important;display:block!important;height:auto!important;min-height:0!important;grid-template-columns:none!important;margin:0!important}
html.am body:has(main.wide>div>aside){overflow:hidden;overscroll-behavior:none}
html.am body:has(main.wide>div>aside) footer{display:none}
/* the centre column fills it: category row, item strip, caption, map */
html.am main.wide>div:has(>aside)>:not(aside,.am-sheet){position:absolute!important;inset:0!important;display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;width:auto!important}
html.am main.wide>div:has(>aside)>:not(aside,.am-sheet)>:is(#map,.stage,.mapbox){position:relative;flex:1 1 auto!important;min-height:0!important;height:auto!important}
html.am main.wide>div:has(>aside)>:not(aside,.am-sheet)>.stage>#map,html.am main.wide>div:has(>aside)>:not(aside,.am-sheet)>.mapbox>#map{position:absolute!important;inset:0!important;height:auto!important;min-height:0!important}
html.am main.wide>div:has(>aside)>:not(aside,.am-sheet)>:is(#ht,.am-vt,.caption){flex:none}
html.am main.wide>div:has(>aside) .caption{font-size:.8rem!important;padding:5px 12px!important;max-height:3.3em;overflow:auto;min-height:0!important}
html.am main.wide>div:has(>aside) .caption b{font-size:.95rem!important}
/* the category row, moved here from the side column by the script */
html.am .am-vt{flex:none;flex-direction:row!important;gap:2px!important;margin:0!important;padding:2px 6px 0;overflow-x:auto;scrollbar-width:none;background:var(--sheet);border-bottom:1px solid var(--hair);touch-action:pan-x}
html.am .am-vt::-webkit-scrollbar{display:none}
html.am .am-vt button{padding:9px 11px 7px!important;border-radius:0!important;font-size:.86rem!important;white-space:nowrap}
html.am .am-vt button[aria-selected=true]{background:none!important}
html.am .at-h{padding:6px 8px!important;gap:6px!important}
html.am .at-h .at-step{display:none}
html.am .at-h .at-pop{z-index:85!important;left:8px!important;right:8px;width:auto!important;max-height:55dvh!important}
/* story furniture on a small screen */
html.am .as-big,html.am .story .era-title{font-size:1.25rem!important;max-width:72%!important;left:12px!important;top:8px!important}
html.am .as-big small,html.am .story .era-title small{font-size:.72rem!important}
html.am .mig .clock{font-size:1.1rem;bottom:12px}
html.am .maplibregl-ctrl-top-right .maplibregl-ctrl-group{display:none}
html.am .maplibregl-ctrl-bottom-right,html.am .story .maplibregl-ctrl-bottom-right{bottom:0!important}
/* the time band rides on top of the sheet, wherever the sheet is */
html.am .as-ribbon{position:fixed!important;left:0;right:0;bottom:calc(var(--am-bot) + var(--sh))!important;z-index:50;box-shadow:0 -1px 0 var(--hair);transition:bottom .28s cubic-bezier(.2,.8,.2,1)}
html.am.am-dragging .as-ribbon{transition:none}
html.am[data-sheet=full] .as-ribbon{visibility:hidden}

/* ---------------------------------------------------------------- the sheet */
html.am .am-sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:var(--am-bot);height:var(--sh);z-index:51;background:var(--sheet);border-radius:16px 16px 0 0;box-shadow:0 -4px 22px rgba(20,16,10,.16),0 -1px 0 var(--hair);transition:height .28s cubic-bezier(.2,.8,.2,1)}
html.am .am-sheet[hidden]{display:none}
html.am.am-dragging .am-sheet,html.am.am-dragging .am-pg{transition:none}
.am-shead{flex:none;height:var(--am-mini);touch-action:none;user-select:none;-webkit-user-select:none}
.am-shead .am-grab{height:20px}
.am-stabs{display:flex;gap:4px;padding:0 10px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.am-stabs::-webkit-scrollbar{display:none}
.am-stabs button{all:unset;flex:none;position:relative;padding:7px 12px 9px;font:500 .86rem/1.1 var(--f-body);color:var(--ink-3);white-space:nowrap;cursor:pointer;touch-action:manipulation;max-width:15rem;overflow:hidden;text-overflow:ellipsis}
.am-stabs button[aria-selected=true]{color:var(--ink);font-weight:600}
.am-stabs button[aria-selected=true]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:2px;background:var(--accent)}
.am-stabs button.dot::before{content:"";position:absolute;right:3px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* each side column and story panel is a page of the sheet, laid exactly over its body */
html.am main.wide>div:has(>aside)>aside,html.am main.wide>div:has(>aside) .as-panel{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:var(--am-bot)!important;width:auto!important;height:max(0px, calc(var(--sh) - var(--am-mini)))!important;max-height:none!important;min-height:0!important;margin:0!important;transform:none!important;z-index:52;display:none!important;overflow:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--sheet)!important;backdrop-filter:none!important;padding:4px 16px calc(20px + env(safe-area-inset-bottom, 0px))!important;font-size:.9rem!important;grid-column:auto!important;transition:height .28s cubic-bezier(.2,.8,.2,1)}
html.am main.wide>div:has(>aside)>aside.am-on,html.am main.wide>div:has(>aside) .as-panel.am-on:not([hidden]){display:block!important}
html.am .as-panel>header{display:none!important}
html.am .as-panel>.as-body{display:block!important;padding:0!important;overflow:visible!important}
/* the page's name is in the top bar; its introduction folds to three lines until tapped */
html.am main.wide>div:has(>aside)>aside>h1:first-child{display:none}
html.am main.wide>div:has(>aside)>aside>h1:first-child+p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;margin-top:4px}
html.am main.wide>div:has(>aside)>aside>h1:first-child+p.am-open{display:block}
/* touch sizes */
html.am main.wide>div:has(>aside) :is(label.tog,.keylist .t,.as-key div,.hits li){min-height:32px;align-items:center}
html.am :is(input,select,textarea){font-size:16px}
html.am button,html.am a{touch-action:manipulation}

/* the full-page flow charts keep the tab bar in view */
html.am :is(.af-pane,.flowpane){bottom:var(--am-bot)!important;z-index:60}
html.am :is(.af-pane,.flowpane) .fh{flex-wrap:wrap;gap:4px 10px!important;padding:8px 12px!important}
html.am :is(.af-pane,.flowpane) .fh span{flex-basis:100%;order:3;font-size:.78rem!important}
html.am :is(.af-pane,.flowpane) .fctl{position:static!important;gap:6px 10px!important;padding:8px 12px!important}
html.am :is(.af-pane,.flowpane) :is(.chips,.presets){flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;max-width:100%}
html.am :is(.af-pane,.flowpane) :is(.chips,.presets)>*{flex:none}
html.am :is(.af-pane,.flowpane) .fh span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.am .af-pane .legend{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
html.am .af-pane .legend>*{flex:none}
/* the caveat stays on screen, folded to four lines; a tap opens it */
html.am .af-pane .caveat{position:relative;max-height:6.6em;overflow:hidden;margin:8px 12px 0!important;cursor:pointer}
html.am .af-pane .caveat::after{content:"Read the whole caveat \25BE";position:absolute;right:0;bottom:0;padding:16px 12px 6px 40px;font-weight:600;color:var(--accent);background:linear-gradient(90deg,transparent,var(--wash) 30%)}
html.am .af-pane .caveat.am-open{max-height:none}
html.am .af-pane .caveat.am-open::after{content:none}
/* at the strip, the sheet shows its tabs only */
html.am[data-sheet=mini]:not(.am-dragging) main.wide>div:has(>aside) :is(aside,.as-panel){visibility:hidden}

/* census and the other reading pages: nothing may widen the page (a phone would zoom the whole
   page out to fit it, and the bars with it); the country row is a category row, the census strip
   stays under the top bar, wide tables scroll inside themselves */
html.am body{overflow-x:hidden}
html.am .cen{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}
html.am .cen .nav{position:static!important;height:auto!important;padding:0!important;border-right:0!important;border-bottom:0!important;background:var(--sheet)}
html.am .cen .nav h2{display:none}
html.am .cen .nav .at-v{flex-direction:row!important;gap:2px!important;margin:0!important;padding:2px 6px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hair)}
html.am .cen .nav .at-v::-webkit-scrollbar{display:none}
html.am .cen .nav .at-v button{width:auto!important;flex:none;padding:9px 11px 7px!important;border-radius:0!important;font-size:.86rem!important;white-space:nowrap;background:none!important}
html.am .cen .main>#ht{position:sticky;top:var(--am-top);z-index:5}
html.am .cen .body{padding:16px!important}
html.am .cen table.ser{display:block;overflow-x:auto}
html.am .cen .vals .row{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) 4.5rem!important}
html.am .cnav{top:var(--am-top)!important}  /* the names page's chapter bar sticks under the top bar */
html.am main:not(.wide){padding:18px 16px 28px}
html.am main:not(.wide) h1{font-size:1.65rem}

/* ---------------------------------------------------------------- the hint for a tapped shape, and notices */
html.am .am-tip{display:block;position:fixed;left:12px;right:12px;bottom:calc(var(--am-bot) + 12px);z-index:90;background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 14px;font-size:.84rem;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:none}
html.am .am-tip.on{opacity:1;transform:none}
.am-toast{display:flex;position:fixed;left:12px;right:12px;bottom:calc(var(--am-bot) + 12px);z-index:91;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 10px 10px 14px;font-size:.88rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.am-toast[hidden]{display:none}
.am-toast span{flex:1}
.am-toast button{font:600 .86rem var(--f-body);border:0;border-radius:8px;padding:7px 12px;background:var(--accent);color:#fff;cursor:pointer}
.am-toast button.x{background:none;color:var(--paper);opacity:.7;padding:7px 8px}
html:not(.am) .am-toast{left:auto;right:16px;bottom:16px;max-width:24rem}
/* the home page's invitation to install */
.am-invite{display:none}
html.am .am-invite{display:flex;gap:12px;align-items:center;background:var(--sheet);border:1px solid var(--hair);border-radius:14px;padding:12px 12px 12px 14px;margin:0 0 18px}
html.am .am-invite[hidden]{display:none}
.am-invite img{width:44px;height:44px;border-radius:11px;flex:none}
.am-invite div{flex:1;font-size:.86rem;color:var(--ink-2);line-height:1.35}
.am-invite b{display:block;color:var(--ink);font-size:.95rem}
.am-invite button{font:600 .84rem var(--f-body);border:0;border-radius:9px;padding:8px 12px;background:var(--accent);color:#fff;cursor:pointer}
.am-invite button.x{background:none;color:var(--ink-3);padding:8px 6px}
