/* The top menu: the five tools on one row, each a line icon over its name, small enough for a phone (the owner's
   requests of 2026-10-14 and -15), with a short line between one and the next. Each entry is as wide as its name
   and the room left is shared out equally, so every name stands in the middle between its lines with the same gap
   on both sides as every other name. The beginners' guide is the page the site opens on and has no entry here. */
.guide-tabs{display:flex;gap:0;overflow:visible}
.guide-tabs>[hidden]{display:none!important}
.guide-tabs>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;height:56px;padding:6px 8px;flex:1 1 auto!important;white-space:normal!important;word-break:keep-all;font-size:13px;line-height:1.25;text-align:center}
.guide-tabs>button:not([hidden])~button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:color-mix(in srgb,var(--muted) 40%,transparent)}
.guide-tabs .menu-icon{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* On a phone every entry is of one height whatever the width, the name on two lines at most and broken only between
   its words (an entry is never narrower than its longest word), so the menu is as tall at 320px as at 700px: docked,
   it keeps its place. */
@media(max-width:700px){.guide-tabs>button{height:56px;min-height:0;min-width:min-content;padding:2px 3px;gap:2px;overflow:hidden;font-size:11px;line-height:1.2}.guide-tabs>button>span{padding-bottom:5px}.guide-tabs .menu-icon{width:18px;height:18px}.guide-tabs>button:not([hidden])~button::before{top:10px;bottom:10px}}
/* Every tab's title the same way (the owner's request of 2026-10-15): no small label above it, no room above it
   (the menu or the tabs over it keep their own gap), 24px under it; the title and its description at the left, a
   button or a mark beside them at the right. (The quests shown inside the hunting guide keep their own, smaller.) */
main :is(.intro,.beginner-hero,.outfit-heading,.community-heading,.group-heading,.skills-heading,.hunting-heading,.quest-heading,.experience-heading,.enh-heading,.bestiary-heading){display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:0 0 24px;padding:0}
main :is(.intro,.beginner-hero,.outfit-heading,.community-heading,.group-heading,.skills-heading,.hunting-heading,.quest-heading,.experience-heading,.enh-heading,.bestiary-heading) h1{margin:0}
main :is(.intro,.beginner-hero,.outfit-heading,.community-heading,.group-heading,.skills-heading,.hunting-heading,.quest-heading,.experience-heading,.enh-heading,.bestiary-heading)>div>p{margin:8px 0 0;color:var(--muted)}
main .hunting-linked-quest-content .quest-heading{margin:12px 0 20px}
/* The two menus with tabs of their own: their title above the tabs; under the tabs, a tab shows its description,
   buttons and marks without a big title of its own (the menu's stays). The quests shown inside the hunting guide
   keep theirs. */
.group-heading+:is(.growth-subtabs,.hunting-subtabs){margin-top:0}
:is(#panel-growth .skills-heading,#panel-growth .enh-heading,#panel-hunting-guide>.hunting-heading,#panel-experience .experience-heading,#panel-attack-doping .experience-heading,#panel-bestiary .bestiary-heading,#panel-quests .quest-panel>.quest-heading) h1{display:none}
main :is(#panel-growth .skills-heading,#panel-growth .enh-heading,#panel-hunting-guide>.hunting-heading,#panel-experience .experience-heading,#panel-attack-doping .experience-heading,#panel-bestiary .bestiary-heading,#panel-quests .quest-panel>.quest-heading)>div>p:first-of-type{margin-top:0}
/* Use the existing quest subtab size for all nested navigation. */
:root{--subtab-font-size:13px}
:is(.price-tabs,.hunting-subtabs,.growth-subtabs,.outfit-categories,.outfit-slots,.skills-factions,.skills-library-modes,.enh-modes,.experience-categories,.beginner-subtabs)>button{font-size:var(--subtab-font-size)}
@media(max-width:700px){:root{--subtab-font-size:12px}}
/* The skill and enhancement group lays its tabs out like the hunting group. */
.growth-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:-10px 0 28px}
/* The five tabs of 사냥·퀘스트 share one row on phones, each as wide as its name. */
@media(max-width:700px){.hunting-subtabs{gap:0;justify-content:space-between}.hunting-subtabs button{flex:0 1 auto;padding:10px 4px 0}}
@media(max-width:360px){.hunting-subtabs button{padding:10px 2px 0;font-size:11px}}
/* The quests' ranges: one dropdown under the tabs (seven tabs took three rows on a phone; 2026-10-15). */
.quest-range-picker{display:flex;align-items:center;gap:10px;margin:-10px 0 28px}
.quest-range-picker label{flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.quest-range-picker select{width:auto;min-width:220px}
@media(max-width:700px){.quest-range-picker{margin:0 0 28px}.quest-range-picker select{flex:1;min-width:0}}
/* Phones: once the top menu has scrolled out of view it docks to the bottom edge, above the calculator's
   result bar when that bar is showing. The slot keeps the menu's place so the page does not jump.
   Scroll anchoring is off while docked: it pulls the page back down when a newly chosen page loads in.
   Every page under the menu is at least one phone screen tall, so even a short or still-loading one can be
   scrolled until the menu has left, at any width and before any script has measured anything. */
/* The gap under the menu is the slot's padding, so it can be read whether or not the menu is docked. */
.guide-tabs-slot{padding-bottom:28px}
.guide-tabs-slot>.guide-tabs{margin-bottom:0}
@media(max-width:700px){.guide-tabs-slot{padding-bottom:22px}}
@media(max-width:780px){
  main>[role=tabpanel]{min-height:100vh;min-height:100dvh}
  /* Docked, the menu is a bar of its own: taller than in the page, under a line strong enough to part it from
     what scrolls behind. The extra height is padding above and below, which the script leaves out when it works
     out the menu's place in the page; the line is the border and one pixel of shadow, so the border stays as
     thick as the one the menu has in the page. */
  .menu-docked .guide-tabs{position:fixed;z-index:20;left:0;right:0;bottom:var(--menu-dock-bottom,0px);margin:0;padding:7px 6px calc(7px + var(--menu-dock-safe,env(safe-area-inset-bottom)));background:var(--surface);border-top:1px solid var(--line);border-top-color:color-mix(in srgb,var(--muted) 55%,var(--surface));border-bottom:0;box-shadow:0 -1px 0 color-mix(in srgb,var(--muted) 55%,var(--surface)),0 -3px 14px #00000026}
  .menu-docked{padding-bottom:calc(100px + var(--menu-dock-height,0px));overflow-anchor:none}
  /* What the price view brings into the window itself (its box, its chart, a price's history) stops above the docked menu. */
  .menu-docked :is(#market-panel,#market-chart,.market-price-popover){scroll-margin-bottom:calc(var(--menu-dock-height,0px) + 8px)}
  .menu-docked .outfit-pip:not([hidden]){bottom:calc(var(--menu-dock-height,0px) + max(12px,env(safe-area-inset-bottom)))}
}