/* v1 frame first · Fable · 2026-10-31. Argon-4's page with the working map dropped in (replaces proto/v1/t8/frame.css on this branch).
   Layout, colour and markup only; app.js is untouched. Materials are Argon-4's: pine chrome (#0d1816 / #152723), two dark pine panels
   with 2px brass edges and an inner brass hairline, Friz for names, Arial caps for labels, Horde merlot / Alliance deep blue on the
   player card only. On the map: one strip (levels + the five charts), the compass, the zoom stack with Layers, and dark warm glass
   cards with a brass hairline. Nothing cream sits on the map. */
@font-face{font-family:Friz;src:url('../../../private/v1/real-art/ui/frizqt__.ttf') format('truetype');font-display:swap}
:root{--pine-0:#0d1816;--pine-1:#132320;--pine-2:#152723;--pine-3:#203933;--pine-4:#233b35;
 --panel:rgba(16,30,27,.96);--panel-2:rgba(11,22,20,.98);--inset:rgba(22,41,36,.72);--inset-2:rgba(35,61,54,.92);--well:rgba(9,17,15,.6);
 --ivory:#ede6d3;--sand:#cfc5ad;--fog:#9eb0a5;--cream:#fff6e0;--brass:#c8ad76;--brass-2:#e5cb90;--brass-3:#9d8453;--brass-line:rgba(200,173,118,.28);--brass-strong:rgba(200,173,118,.55);
 --merlot:#381921;--merlot-2:#241015;--merlot-accent:#e48876;--merlot-gem:#8e2632;--alliance:#1c3152;--alliance-2:#122036;--alliance-accent:#84b6ea;
 --friz:Georgia,'Times New Roman',serif;--ui:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--caps:600 8px/1 Arial,sans-serif;
 --hud-bg:rgba(13,24,22,.8);--hud-blur:blur(14px) saturate(1.2);--hud-edge:1px solid rgba(200,173,118,.3);
 --card-bg:rgba(19,31,28,.82);--card-blur:blur(18px) saturate(1.15);--card-edge:1px solid rgba(200,173,118,.5);
 /* logo r4 shade rows (Astra, proto/v1/style/logo-r4/colours.json: flag pixels from ui/poiicons.png) for the faction theme round; nothing reads them yet */
 --horde-shadow:#52010a;--horde-cloth:#950215;--horde-light:#d00020;--alliance-shadow:#002060;--alliance-cloth:#002cb0;--alliance-light:#0d44a5;--parchment:#dfc99d}
html.art{--friz:Friz,Georgia,serif}
.app{--mast:54px;--stand:46px;--tbh:100px;--fth:26px;--lw:326px;--rw:368px;--gap:16px;--rail-x:calc(var(--rw) + var(--gap)*2)}
.app.tucked{--rail-x:var(--gap)}
html,body{background:var(--pine-0)}
.app:not(.mapfirst) :is(.tabs-soon,.compass,.cartouche.rail,.site-foot,.mast-note,.logo-badge,.zstrip){display:none}

/* ---- the map runs edge to edge under the chrome; the footer rides over its bottom band ---- */
.app.mapfirst{display:block;position:relative;overflow:hidden}
.app.mapfirst .stage{position:absolute;inset:0;padding:0;background:none}
.app.mapfirst .parch{position:absolute;inset:0;padding:0;background:none;display:block}
.app.mapfirst .viewport{position:absolute;inset:var(--tbh) 0 var(--fth) 0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;outline:0}
.app.mapfirst .vignette{box-shadow:inset 0 0 46px rgba(13,24,22,.6),inset 0 -44px 48px rgba(13,24,22,.5)}
.app.mapfirst .cartouche:not(.rail){display:none}

/* ---- masthead: logo box, wordmark, the one Classic line, search. Nothing else. ---- */
.app.mapfirst .strip{position:absolute;top:0;left:0;right:0;z-index:20;display:block;height:var(--tbh);padding:0;box-sizing:border-box;background:var(--pine-2);border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;flex-wrap:nowrap}
.app.mapfirst .strip::after{display:none}
.app.mapfirst .strip .mast{height:var(--mast);display:flex;align-items:center;gap:20px;padding:0 24px;box-sizing:border-box;background:linear-gradient(180deg,#142421,#0e1b18);border-bottom:1px solid var(--brass-line)}
.logo-badge{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--pine-3);border:1px solid var(--brass-strong);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.45)}
/* Logo r4 01 (the loose cast) in the 34px badge: one ink, brass on pine. The paths carry their own widths (4.8 shaft, 2.6 line, 6 butt, 4.8 collars);
   --mark-ink / --mark-accent are the hooks the faction theme round sets (collars in Horde light / Alliance light, say); default is one ink. */
.logo-badge{--mark-ink:var(--brass-2);--mark-accent:var(--mark-ink)}
.logo-badge .mark{width:26px;height:26px;fill:none;stroke:var(--mark-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.logo-badge .mark .accent{stroke:var(--mark-accent)}
.app.mapfirst .strip h1.brand{display:flex;flex-direction:column;justify-content:center;margin:0 0 0 -8px;height:auto;font:21px/1 var(--friz);letter-spacing:.3px;color:var(--ivory)}
.app.mapfirst .strip h1.brand small{display:block;font:var(--caps);letter-spacing:3.4px;text-transform:uppercase;color:var(--brass);margin-bottom:2px}
.app.mapfirst .strip .beta-tag{align-self:flex-start;margin:15px 0 0 -14px;padding:2px 5px 1px;font:var(--caps);letter-spacing:1.6px;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass-line);border-radius:2px;line-height:1}   /* lead 10-31: small "beta" beside the wordmark until go wide */
.app.mapfirst .strip .beta-tag{position:relative;cursor:help}
.app.mapfirst .strip .beta-tip{position:absolute;top:100%;left:0;z-index:50;padding-top:8px;opacity:0;pointer-events:none;transition:opacity .12s;font:12.5px/1.35 var(--ui);letter-spacing:0;text-transform:none;white-space:normal;width:max-content;max-width:360px}
.app.mapfirst .strip .beta-tip{color:#2a1d10}
.app.mapfirst .strip .beta-tag:hover .beta-tip,.app.mapfirst .strip .beta-tag:focus-within .beta-tip{opacity:1;pointer-events:auto}
.beta-tip::before{content:"";position:absolute;inset:8px 0 0 0;background:var(--parchment);border:1px solid var(--brass-line);border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:-1}
.beta-tip{padding:15px 10px 7px}
.beta-report{all:unset;cursor:pointer;color:#6b2a17;font-weight:700;text-decoration:underline}.beta-report:focus-visible{outline:2px solid var(--brass-2)}
   /* Nate 11-01: a hover line on beta */
.mast-note{margin:0;padding:4px 0 4px 20px;border-left:1px solid var(--brass-line);font:italic 12.5px/1.25 Georgia,serif;color:var(--sand);white-space:nowrap}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.app.mapfirst .mast-right .mode-nav,.app.mapfirst .mast-right #layers-btn{display:none}   /* the app drops its nav and Layers here; frame.js moves them (tabs into the stand bar, Layers into the zoom stack) */
.app.mapfirst .strip .search{position:relative;flex:1 1 420px;min-width:160px;max-width:560px;margin:0 auto}
.app.mapfirst .strip input[type=search]{background:rgba(5,12,10,.55);border:1px solid var(--brass-line);color:var(--ivory)}
.app.mapfirst .strip .results{background:rgba(14,26,23,.98);border-color:var(--brass-line)}

/* ---- stand bar: where you stand + Change on the left, the six paths spread on the right ---- */
.app.mapfirst .strip .stand-bar{height:var(--stand);display:flex;align-items:stretch;padding:0 24px;box-sizing:border-box;background:var(--pine-2);border-bottom:2px solid var(--brass-3);box-shadow:inset 0 1px rgba(255,255,255,.05),0 4px 14px rgba(0,0,0,.38)}
.app.mapfirst .strip #you-btn{display:flex;align-items:center;gap:14px;margin:0;padding:0 22px 0 0;height:auto;border:0;border-right:1px solid var(--brass-line);border-radius:0;background:none;color:var(--sand);font:15px/1 var(--friz);white-space:nowrap;cursor:pointer}
.app.mapfirst .strip #you-btn:hover,.app.mapfirst .strip #you-btn[aria-expanded=true]{background:none;color:var(--brass-2)}
.app.mapfirst .sbtn.you .you-l{font:var(--caps);letter-spacing:1.7px;text-transform:uppercase;color:var(--brass-2);padding:4px 7px;background:var(--merlot);border:1px solid var(--brass-strong);border-radius:0}
.app[data-faction=alliance] .sbtn.you .you-l{background:var(--alliance)}
.app.mapfirst .sbtn.you #you-sum{font:15px/1 var(--friz);color:var(--cream)}
.app.mapfirst .sbtn.you .at{display:inline;font:15px/1 var(--friz);color:var(--cream);margin:0;padding:0;border:0;background:none;text-transform:none;letter-spacing:0;box-shadow:none}
.app.mapfirst .sbtn.you .at::before{content:"· ";color:var(--brass)}
.app.mapfirst .sbtn.you .at[hidden],.app.guides .sbtn.you .at{display:none}   /* Guides on: the app's chip names the current stop, not where you stand */
.app.mapfirst .sbtn.you .you-edit{background:none;color:var(--brass-2);padding:3px 8px;border:1px solid var(--brass-line);font:600 11px/1 var(--ui);margin-left:4px}
.app.mapfirst .sbtn.you .you-edit i{color:var(--brass-2)}
.paths{flex:1;display:grid;grid-template-columns:repeat(6,1fr);margin-left:10px;counter-reset:tab;align-items:stretch;min-width:0}
.paths .mode-nav,.paths .tabs-soon{display:contents}
.paths a.chip,.paths .tab-soon{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 6px;height:auto;border:0;border-radius:0;background:none;color:var(--sand);font:14.5px/1 var(--friz);font-style:normal;text-decoration:none;white-space:nowrap;cursor:pointer;min-width:0;overflow:hidden}
.paths .tab-soon{cursor:default;color:#b9ad93}
.paths a.chip::before,.paths .tab-soon::before{font:600 9px/1 Arial,sans-serif;letter-spacing:1px;color:var(--brass);counter-increment:tab;content:"0" counter(tab)}
.paths a.chip::after,.paths .tab-soon::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:15px;width:1px;background:var(--brass-line)}
.paths .mode-nav>a:first-child::after{display:none}
.paths a.chip[aria-current=page]{color:#fff6df;background:linear-gradient(180deg,rgba(200,173,118,.04),rgba(200,173,118,.19));box-shadow:inset 0 -3px var(--brass-2)}
.paths a.chip:hover{color:var(--brass-2)}

/* ---- Change: a dropdown right under the stand sentence (race with the real headshots, start, level, skill, pole) ---- */
.app.mapfirst #drawer-you{left:24px;right:auto;top:100%;margin:-2px 0 0;width:384px;max-height:calc(100vh - var(--tbh) - 40px);overflow:auto;padding:10px 16px 14px;box-sizing:border-box;z-index:30;color:var(--ivory);
 background:linear-gradient(180deg,var(--panel),var(--panel-2));border:2px solid var(--brass-3);border-top:0;border-radius:0;box-shadow:0 16px 40px rgba(0,0,0,.68),inset 0 0 0 1px rgba(229,203,144,.16);scrollbar-width:thin}
.app.mapfirst #drawer-you .rowlbl{font:var(--caps);letter-spacing:1.8px;text-transform:uppercase;color:var(--brass);margin:0 0 7px}
.app.mapfirst #drawer-you .rowhint,.app.mapfirst #drawer-you .you{color:var(--fog);font-size:11.5px}
.app.mapfirst #drawer-you .blk{padding:7px 0 9px;border-bottom:1px solid var(--brass-line)}
.app.mapfirst #drawer-you .blk.foot{border:0;padding-bottom:0}
.app.mapfirst #race{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.app.mapfirst #race button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px 5px;background:var(--well);border:1px solid var(--brass-line);border-radius:0;color:var(--sand);font:12.5px/1 var(--friz)}
.app.mapfirst #race button .rg{display:block;width:44px;height:44px;border:1px solid var(--brass-strong);background:rgba(0,0,0,.35) center/cover no-repeat;box-shadow:0 2px 6px #0009;box-sizing:border-box}
.app.mapfirst #race button .rg svg{width:100%;height:100%;padding:9px;box-sizing:border-box}
.app.mapfirst #race button.has-face .rg svg{display:none}
.app.mapfirst #race button:hover{border-color:var(--brass-strong);color:var(--cream)}
.app.mapfirst #race button[aria-checked=true]{border-color:var(--brass-2);background:rgba(200,173,118,.14);color:var(--cream)}
.app.mapfirst #race button[aria-checked=true] .rg{border-color:var(--brass-2);box-shadow:0 0 0 2px rgba(229,203,144,.35),0 2px 6px #0009}
.app.mapfirst #drawer-you .seg button,.app.mapfirst #drawer-you .stepper,.app.mapfirst #drawer-you .stepper button,.app.mapfirst #drawer-you .stepper input,.app.mapfirst #drawer-you .chip{background:var(--well);border-color:var(--brass-line);color:var(--ivory);border-radius:0}
.app.mapfirst #drawer-you .seg.poles button{padding:5px 8px}
.app.mapfirst #drawer-you .rowlbl{margin-bottom:5px}
.app.mapfirst #drawer-you .seg button[aria-checked=true],.app.mapfirst #drawer-you .chip[aria-pressed=true]{border-color:var(--brass-2);background:rgba(200,173,118,.14);color:var(--cream)}
.app.mapfirst #drawer-you .seg button small{color:var(--fog)}
.app.mapfirst #drawer-you .btn{background:var(--pine-4);color:#fff6df;border-color:var(--brass-3);border-radius:0}
.app.mapfirst #drawer-you .ghost{color:var(--fog)}
.app.mapfirst #drawer-you a{color:var(--brass-2)}

/* ---- left wing: chart number, the zone in one line with its band, your card, your first casts, the next leg ---- */
.trail{left:var(--gap);top:14px;width:var(--lw);max-width:calc(100% - 32px);padding:14px 16px 14px;box-sizing:border-box;z-index:7;color:var(--ivory);overflow:hidden;
 background:var(--panel) linear-gradient(180deg,var(--panel),var(--panel-2));border:2px solid var(--brass-3);border-radius:0;box-shadow:0 16px 40px rgba(0,0,0,.68),inset 0 0 0 1px rgba(229,203,144,.16)}
.trail::before{content:"Chart No. " attr(data-chart) " · " attr(data-land) " · " attr(data-band);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--caps);letter-spacing:1.9px;text-transform:uppercase;color:var(--brass);margin:0 0 5px}
html[data-maplevel="01"] .trail::before{content:"Level 01 · Azeroth"}
html[data-maplevel="02"] .trail::before{content:"Level 02 · Kalimdor"}
.trail .t-top{display:grid;grid-template-columns:auto 1fr;gap:0 13px;align-items:center;margin:0}
.trail .t-top>div:not(.t-meta):not(.t-skill){display:contents}
.trail .t-title{grid-column:1/-1;grid-row:1;font:34px/1 var(--friz);letter-spacing:.4px;text-transform:none;color:#fff6e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 0 10px;margin:0 0 0;border-bottom:1px solid var(--brass-line)}
.trail .t-band{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:8px;margin:0;padding:7px 0 9px;border-bottom:1px solid var(--brass-line);font:600 7.5px/1 Arial,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--brass-2);white-space:nowrap}
.trail .t-band b{font:inherit;color:var(--brass-2);background:rgba(200,173,118,.12);border:1px solid var(--brass-strong);padding:4px 7px}
.trail .t-band span{color:var(--fog)}
.trail .t-top::before{content:"";grid-row:3/span 2;grid-column:1/-1;align-self:stretch;margin:12px 0 0;background:var(--merlot) linear-gradient(180deg,var(--merlot),var(--merlot-2));border:1px solid var(--brass-strong);box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.45);z-index:0}
.app[data-faction=alliance] .trail .t-top::before{background:var(--alliance) linear-gradient(180deg,var(--alliance),var(--alliance-2))}
.trail .race-icon{grid-row:3;grid-column:1;position:relative;z-index:1;width:62px;height:62px;margin:23px 0 0 12px;background:rgba(0,0,0,.35);border:2px solid var(--brass-2);border-radius:0;box-shadow:0 4px 12px rgba(0,0,0,.65);color:var(--ivory)}
.trail .race-icon::after{display:none}
.trail .race-icon.has-face{background-size:cover;background-position:center;background-repeat:no-repeat}.trail .race-icon.has-face svg{display:none}
.trail .t-meta{grid-row:3;grid-column:2;position:relative;z-index:1;margin:23px 12px 0 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.trail .t-tag{font:700 8px/1 Arial,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--merlot-accent)}
.trail .t-tag span+span::before{content:" · "}
.app[data-faction=alliance] .trail .t-tag{color:var(--alliance-accent)}
.trail .t-at{font:18px/1.15 var(--friz);color:#fff6e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trail .t-you{margin:0;padding:0;font:11px/1.4 var(--ui);color:#e6d6c3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trail .t-you:has(.sk-ctl,.fish-ask){white-space:normal;overflow:visible}   /* a control opened in the line gets its room */
.trail .t-you .t-part{color:var(--cream);border-bottom:1px dotted var(--merlot-accent)}
.trail .t-you .t-part:hover{color:var(--brass-2)}
.trail .t-skill{grid-row:4;grid-column:1/-1;position:relative;z-index:1;margin:10px 12px 11px;padding-top:9px;border-top:1px solid rgba(200,173,118,.25)}
.trail .t-skill .sk-head{display:flex;justify-content:space-between;align-items:baseline;margin:0;font:13px/1 var(--friz);color:var(--ivory)}
.trail .t-skill .sk-head b{font:400 18px/1 var(--friz);color:var(--brass-2)}.trail .t-skill .sk-head b small{font:10.5px Arial,sans-serif;color:#ccb5b9}
.trail .t-skill .sk-head b small::before{content:" / "}
.trail .t-skill .sk-meter{height:7px;background:rgba(0,0,0,.35);border:1px solid rgba(200,173,118,.45);margin:6px 0;padding:1px}
.trail .t-skill .sk-meter i{display:block;height:100%;background:linear-gradient(90deg,#b85d43,#e5cb90)}
.trail .t-skill .sk-sub{display:flex;justify-content:space-between;font:10px/1 var(--ui);color:#d6c2c5}
.trail .t-moved{color:var(--sand);font:italic 11.5px/1.3 Georgia,serif;margin:8px 0 0}
.trail .card-baseline{display:none}   /* the Classic line is said once, in the masthead */
.trail .dots{margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--brass-line);display:grid;gap:6px;list-style:none}
.trail .dots::before{content:attr(data-leg);display:block;font:700 8px/1 Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--brass);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trail .dots:not([data-leg])::before{content:"Your first casts"}
.trail .dots li{margin:0;padding:0;list-style:none}
.trail .dot{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:6px 10px 6px 7px;border:1px solid var(--brass-line);border-radius:0;background:var(--inset);color:#fff6df;font:13.5px/1.2 var(--friz)}
.trail .dot i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--pine-4);border:1.5px solid var(--brass-2);color:#fff6df;font:700 11px/19px Arial,sans-serif;text-align:center;box-shadow:none}
.trail .dot .rune{position:relative;display:inline-block;width:26px;height:26px;flex:none}
.trail .dot:hover{border-color:var(--brass-strong);background:var(--inset-2)}
.trail .dot.cur{background:var(--inset-2);border-color:var(--brass-strong);box-shadow:inset 3px 0 0 var(--brass-2)}
.trail .dot.cur i{background:var(--brass-2);color:#1d1507;border-color:#1d1507}
.trail .dot.done i{opacity:.6}
.trail .t-foot{display:block;margin:12px -16px -14px;padding:8px 12px 9px 13px;background:rgba(14,26,23,.93);border-top:1px solid var(--brass-strong);border-left:3px solid var(--brass-2);color:inherit;text-decoration:none}
.trail .t-foot small{display:block;font:700 7.5px/1 Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--brass);margin-bottom:3px}
.trail .t-foot b{display:block;font:13px/1.25 var(--friz);font-weight:400;color:var(--cream)}
.trail a.t-foot:hover b{color:var(--brass-2)}
.trail .t-enter{display:none;margin:12px 0 0;padding:9px 12px;width:100%;justify-content:space-between;align-items:center;gap:10px;background:rgba(200,173,118,.1);border:1px solid var(--brass-strong);color:var(--cream);font:14px/1 var(--friz);cursor:pointer;text-align:left;border-radius:0}
.trail .t-enter:hover{background:rgba(200,173,118,.2)}
.trail .t-enter small{font:700 8px/1 Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-2);white-space:nowrap}
.trail .t-enter:not([hidden]){display:flex}
.app.atlas .trail :is(.dots,.t-foot,.t-band,.t-moved){display:none}
.app.atlas :is(#tcard,.ttail,.plist){visibility:hidden;pointer-events:none}   /* an open card belongs to the zone map, not the atlas */

/* ---- right pane: the waters of the zone, nothing else; collapses to a tab ---- */
.mapfirst .cartouche.rail{display:flex;flex-direction:column;position:absolute;left:auto;right:var(--gap);top:14px;bottom:16px;width:var(--rw);max-width:none;padding:0;z-index:7;box-sizing:border-box;color:var(--ivory);
 background:var(--panel) linear-gradient(180deg,var(--panel),var(--panel-2));border:2px solid var(--brass-3);border-radius:0;box-shadow:0 16px 44px rgba(0,0,0,.7),inset 0 0 0 1px rgba(229,203,144,.16);pointer-events:auto}
.app.tucked .mapfirst .cartouche.rail,.app.tucked .cartouche.rail,.app.atlas .cartouche.rail{display:none}
@media (min-width:1000px){.app.mapfirst:not(.tucked):not(.atlas) #tcard[data-docked="true"]{translate:calc(16px - var(--rail-x)) 40px}.app.mapfirst.tucked #tcard[data-docked="true"]{translate:0 40px}}   /* a docked water card steps left of the pane and under the strip */
.app.mapfirst #tcard[data-docked="true"]{max-height:calc(100% - 72px);overflow:auto}
.rail-x{position:absolute;left:0;top:50%;transform:translate(-100%,-50%);width:20px;height:56px;border:1px solid var(--brass-3);border-right:0;border-radius:3px 0 0 3px;background:var(--pine-2);color:var(--brass-2);font-size:16px;padding:0;box-shadow:-4px 0 10px rgba(0,0,0,.3);cursor:pointer}
.rail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:15px 16px 11px;border-bottom:1px solid var(--brass-line)}
.rail-head>div{min-width:0}
.rail-eyebrow{margin:0 0 4px;font:var(--caps);letter-spacing:1.8px;text-transform:uppercase;color:var(--brass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-title{margin:0;font:21px/1.1 var(--friz);color:#fff6e3}
.rail-count{flex:none;font:700 8px/1 Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--brass-2);background:rgba(200,173,118,.14);border:1px solid var(--brass-strong);padding:5px 8px;margin-top:2px}
.rail-count:empty{display:none}
.rail-list{flex:1;min-height:0;overflow:auto;padding:10px 10px 12px;scrollbar-width:thin;scrollbar-color:var(--brass-3) transparent}
.rail-sec{display:none}
.rail-row{display:grid;grid-template-columns:34px 1fr;gap:4px 10px;align-items:center;width:100%;text-align:left;padding:9px 11px;margin:0 0 8px;border:1px solid var(--brass-line);border-radius:0;background:var(--inset);color:var(--ivory);cursor:pointer}
.rail-row .lg-pin{position:relative;display:inline-block;width:34px;height:34px;flex:none;grid-row:1;grid-column:1}
.rail-row .lg-pin .gl{left:4px;top:4px;width:26px;height:26px;transform:none}
.rail-row .lg-pin .gl svg{width:15px;height:15px}
.rail-row .rr-n{position:absolute;right:-5px;top:-5px;min-width:16px;height:16px;border-radius:50%;background:var(--brass-2);color:#1d1507;font:700 10px/16px Arial,sans-serif;font-style:normal;text-align:center;border:1.5px solid #1d1507;box-shadow:0 1px 3px #0008;z-index:2}
.rail-row .rr-t{grid-row:1;grid-column:2;min-width:0;display:flex;flex-direction:column;gap:3px}
.rail-row b{font:13.5px/1.15 var(--friz);font-weight:400;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-row small{font:600 7.5px/1 Arial,sans-serif;letter-spacing:1.1px;text-transform:uppercase;color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-row .rr-fish{grid-row:2;grid-column:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.rail-row .rr-fish:empty{display:none}
.rail-row .rr-fish span{display:inline-flex;align-items:center;gap:5px;font:600 8px/1 Arial,sans-serif;letter-spacing:.5px;color:var(--ivory);background:var(--well);border:1px solid rgba(200,173,118,.22);padding:3px 6px 3px 3px;white-space:nowrap}
.rail-row .rr-fish span.noicon{padding-left:6px}
.rail-row .rr-fish img{width:16px;height:16px;border:1px solid var(--brass-3);display:block}
.rail-row:hover,.rail-row.hot{background:var(--inset-2);border-color:var(--brass-strong)}
.rail-row.sel{background:var(--inset-2);border-color:var(--brass-strong);box-shadow:inset 3px 0 0 var(--brass-2)}
.mapfirst .reopen{display:block;top:50%;right:0;background:var(--pine-2);border:1px solid var(--brass-3);border-right:0;color:var(--brass-2);z-index:7;font:600 12px/1 var(--ui)}
.mapfirst .reopen[hidden],.app.atlas .reopen{display:none}

/* ---- the deeper layer (Guides): the drawer sits where the pane sits, same panel ---- */
.app.mapfirst .answer{right:var(--gap);top:calc(var(--tbh) + 14px);bottom:calc(var(--fth) + 16px);width:var(--rw);border:2px solid var(--brass-3);border-radius:0;background:linear-gradient(180deg,var(--panel),var(--panel-2));color:var(--ivory);box-shadow:0 16px 44px rgba(0,0,0,.65)}
.app.mapfirst .answer .eyebrow{color:var(--brass)}
.app.mapfirst .answer .step .n{background:var(--pine-4);color:#fff6df;border:1.5px solid var(--brass-2)}
.app.mapfirst .dtab{display:block;background:var(--pine-2);border:1px solid var(--brass-3);border-right:0;border-radius:3px 0 0 3px;color:var(--brass-2);box-shadow:-4px 0 10px rgba(0,0,0,.3)}   /* the guide drawer's slim tab (the app shows it with Guides on): kept, in the frame's materials; it sits below the Waters tab */
.app.mapfirst .dtab[hidden]{display:none}
.app.mapfirst .dtab{width:auto;height:auto;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px/1 var(--ui)}.app.mapfirst .dtab-l{writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:2px}   /* named like Waters (Nate 11-01: a bare ‹ read as a second, mystery tab) */
.app.mapfirst:not(.tucked) .dtab{right:calc(var(--rail-x) - var(--gap))}
.app.mapfirst.drawer-open .dtab{right:calc(var(--rw) + var(--gap))}
.app.mapfirst.drawer-open .answer-body{visibility:visible}
.app.mapfirst .answer-body{scrollbar-width:thin;scrollbar-color:var(--brass-3) transparent}.app.mapfirst.drawer-open .reopen{display:none}   /* Nate 11-01: no white system scrollbar, and the Waters tab doesn't peek out beside the open Your leg pane */

/* ---- the map's own tools: the level strip with the five charts, the compass, the zoom stack with Layers ---- */
/* Nate 11-01: the crumb bar hugs what it holds, with padding; no empty run to the right */
.zstrip{position:absolute;z-index:6;left:calc(var(--lw) + var(--gap) + 12px);right:auto;width:max-content;max-width:calc(100% - var(--lw) - var(--gap) - 12px - var(--rail-x) - 72px);top:14px;height:30px;display:flex;align-items:center;gap:2px;padding:0 12px 0 10px;box-sizing:border-box;background:var(--hud-bg);border:var(--hud-edge);border-radius:3px;box-shadow:0 3px 10px #0008;-webkit-backdrop-filter:var(--hud-blur);backdrop-filter:var(--hud-blur);white-space:nowrap;overflow:hidden}
.zstrip #crumbs{position:static;transform:none;display:flex;align-items:center;gap:6px;margin:0 2px 0 0;padding:0;z-index:auto;flex:none;order:0}
.zstrip #crumbs button{font:600 12.5px/1 var(--friz);color:var(--sand);padding:4px 2px;margin:0;border:0;background:none;box-shadow:none;cursor:pointer}
.zstrip #crumbs button small{font:600 8px/1 Arial,sans-serif;letter-spacing:.8px;color:var(--brass);margin-right:5px}
.zstrip #crumbs button:hover{color:var(--brass-2)}
.zstrip #crumbs button[aria-current="true"]{color:#fff6df}
.zstrip #crumbs button[aria-disabled="true"]{opacity:.4;cursor:default}
.zstrip #crumbs .sep{color:var(--brass);font:13px/1 var(--friz)}
.zstrip .zs-div{width:1px;height:16px;background:var(--brass-line);margin:0 8px 0 6px;flex:none;order:1}
.zs-chips{display:flex;align-items:center;gap:2px;min-width:0;order:2}
.zs-chips a{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:2px;color:var(--sand);font:12.5px/1 var(--friz);text-decoration:none;white-space:nowrap}
.zs-chips a small{font:600 8px/1 Arial,sans-serif;letter-spacing:.8px;color:var(--brass)}
.zs-chips a:hover{color:var(--brass-2);background:rgba(200,173,118,.1)}
html[data-maplevel="03"] .zs-chips a[aria-current=page]{color:#fff6df;background:rgba(200,173,118,.18);box-shadow:inset 0 -2px var(--brass-2)}
.zstrip #tiers{position:static;margin-left:auto;padding:0 0 0 8px;gap:6px;flex:none;order:3;background:none;border:0;display:flex}
.zstrip #tiers button{font:600 9px/1 Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--sand);text-shadow:none;padding:4px 6px;margin:0;border:1px solid transparent;background:none;cursor:pointer}
.zstrip #tiers button.on{color:var(--brass-2);text-decoration:none;border-color:var(--brass-strong);background:rgba(200,173,118,.1)}
.zstrip #tiers[hidden]{display:none}
.app.mapfirst .compass{position:absolute;z-index:6;right:calc(var(--rail-x) + 6px);top:12px;width:50px;text-align:center;color:#f3e3be;pointer-events:none;filter:drop-shadow(0 2px 6px #000b)}
.app.mapfirst .compass span{font:700 9.5px Georgia,serif;letter-spacing:1px}
.app.mapfirst .compass svg{display:block;fill:none;stroke:currentColor;stroke-width:1}
.app.mapfirst .compass .north{fill:currentColor}
.app.mapfirst .coords{display:none}
.app.mapfirst .zoom{right:var(--rail-x);bottom:14px;border:var(--hud-edge);border-radius:3px;overflow:hidden;box-shadow:0 3px 10px #0008}
.app.mapfirst .zoom button{width:38px;height:36px;background:var(--hud-bg);color:var(--brass-2);border:0;border-bottom:1px solid var(--brass-line);-webkit-backdrop-filter:var(--hud-blur);backdrop-filter:var(--hud-blur)}
.app.mapfirst .zoom button:hover{background:rgba(35,61,54,.92)}
.app.mapfirst .zoom button:last-child{border-bottom:0}
.app.mapfirst .zoom #layers-btn{display:grid;place-items:center;padding:0;margin:0;border-radius:0;font-size:0;gap:0;border-top:1px solid var(--brass-strong)}
.app.mapfirst .zoom #layers-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.app.mapfirst .zoom #layers-btn[aria-expanded=true]{background:rgba(200,173,118,.22);color:#fff6df}
.app.mapfirst .zoom #layers-btn i{display:none}
.app.atlas .zoom #layers-btn{display:none}
/* Layers: its list is the legend (icon, name, count, toggle); the skill key lives inside it */
.app.mapfirst #drawer-layers{position:absolute;left:auto;right:calc(var(--rail-x) + 46px);top:auto;bottom:14px;margin:0;width:284px;max-height:calc(100% - 80px);overflow:auto;padding:12px 14px 12px;box-sizing:border-box;z-index:9;color:var(--ivory);
 background:linear-gradient(180deg,var(--panel),var(--panel-2));border:2px solid var(--brass-3);border-radius:0;box-shadow:0 16px 40px rgba(0,0,0,.68),inset 0 0 0 1px rgba(229,203,144,.16);scrollbar-width:thin}
.app.mapfirst #drawer-layers[hidden],.app.atlas #drawer-layers{display:none}
.app.mapfirst #drawer-layers .ly-head{margin:0 0 8px;font:var(--caps);letter-spacing:1.8px;text-transform:uppercase;color:var(--brass)}
.app.mapfirst #layers{display:grid;gap:4px}
.app.mapfirst #layers .layer{display:grid;grid-template-columns:auto 22px 1fr auto;align-items:center;gap:9px;padding:6px 8px;margin:0;background:var(--inset);border:1px solid var(--brass-line);color:var(--ivory);font:12.5px/1 var(--ui);cursor:pointer}
.app.mapfirst #layers .layer:hover{background:var(--inset-2)}
.app.mapfirst #layers .layer input{margin:0;accent-color:var(--brass-2)}
.app.mapfirst #layers .layer svg{width:18px;height:18px;display:block}
.app.mapfirst #layers .layer .n{font:600 10px/1 var(--ui);color:var(--fog);justify-self:end}
.app.mapfirst #layers .layer .n:empty{display:none}
.app.mapfirst #layers .layer:has(input:not(:checked)){opacity:.6}
.app.mapfirst #drawer-layers .water-key{position:static;max-width:none;margin:10px 0 0;padding:9px 0 0;border:0;border-top:1px solid var(--brass-line);border-radius:0;background:none;color:var(--ivory);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:12px/1.4 var(--ui)}
.app.mapfirst #drawer-layers .water-key summary{font:var(--caps);letter-spacing:1.8px;text-transform:uppercase;color:var(--brass);cursor:default;list-style:none;padding:0;margin:0 0 6px}
.app.mapfirst #drawer-layers .water-key summary::-webkit-details-marker{display:none}
.app.mapfirst #drawer-layers .water-key .water-key-types{border-top-color:var(--brass-line)}

/* ---- bottom: one footer line, over the map's bottom band ---- */
.site-foot{position:absolute;left:0;right:0;bottom:0;height:var(--fth);display:flex;align-items:center;gap:18px;padding:0 24px;box-sizing:border-box;background:#091110;border-top:1px solid var(--brass-line);color:var(--fog);font:10.5px/1 var(--ui);z-index:12}
.site-foot .f-brand{white-space:nowrap}.site-foot .f-brand strong{color:var(--ivory);font-weight:600}.site-foot .f-brand i{font-style:normal;margin:0 8px;color:var(--brass)}
.site-foot .f-credit{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-foot .f-credit .m-credit{position:static;display:inline;max-width:none;margin:0;padding:0;background:none;color:var(--fog);font:inherit;white-space:nowrap;pointer-events:auto;box-shadow:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-foot .f-na{white-space:nowrap;margin-left:auto}
.site-foot:has(.m-credit) .f-na{display:none}   /* the app's credit line already says not affiliated; under base=ours the static line stands (F-034) */
.app.mapfirst .viewport .m-credit{display:none}   /* frame.js moves the credit line into the footer */
.app.mapfirst .legend{display:none}   /* the legend lives in Layers; with the footer outside the map the card floor is the map's own bottom */

/* ---- runes: the pin's glyph cloned into pane rows, the first casts and the legend (its own class, never counted as a map marker) ---- */
.rune .gl{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--metal-3),var(--metal-1));border:2px solid var(--c,var(--gold));box-shadow:0 2px 6px #000a,0 0 0 1px #000;box-sizing:border-box}
.rune .gl svg{width:15px;height:15px;fill:none;stroke:var(--c,var(--gold));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rune.trainer{--c:#f0cf7e}.rune.supply{--c:#86c5e6}.rune.cook{--c:#e89a6a}.rune.inn{--c:#c8a8e8}.rune.gate{--c:#f0cf7e}.rune.water{--c:#9fe0ff}
.rune .gl.bdg{background:#202c31}.rune .gl.bdg svg{width:22px;height:22px;stroke:none}
/* ---- pins: hover link, numbers on the waters, the real headshot on the start pin, small unnamed waters lit but not named ---- */
.pin.g2-hot .gl{transform:scale(1.18);box-shadow:0 0 0 3px var(--brass-2),0 0 14px 4px rgba(229,203,144,.55),0 2px 8px #000c}
.town.g2-hot .tg{background:var(--brass-2);box-shadow:0 0 0 3px rgba(229,203,144,.5),0 1px 4px #000a}
.tmark.g2-hot .tm-n{color:var(--brass-2)}
.pin .g2n{position:absolute;left:6px;top:-23px;min-width:16px;height:16px;border-radius:50%;background:var(--brass-2);color:#1d1507;font:700 10px/16px Arial,sans-serif;font-style:normal;text-align:center;border:1.5px solid #1d1507;box-shadow:0 1px 3px #000a;pointer-events:none;z-index:2}
html.art .mapfirst .pin.start .gl.has-face{background:var(--face) center/cover no-repeat;border-color:var(--brass-2);box-shadow:0 0 0 3px rgba(229,203,144,.35),0 0 14px 4px rgba(229,203,144,.35),0 2px 6px #000a}
html.art .mapfirst .pin.start .gl.has-face svg{display:none}
.pin.water.minor .nm{display:none}
/* ---- cards and hover lists on the map: dark warm glass, a brass hairline, the map faintly through ---- */
.tcard,.tcard.water-card,.plist{background:var(--card-bg);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);border:var(--card-edge);border-radius:0;box-shadow:0 12px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(229,203,144,.08);color:var(--ivory)}
.tcard h3{color:#fff6e3;font-family:var(--friz)}
.ttail polygon,.ttail circle{fill:var(--brass-3)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tcard,.tcard.water-card,.plist{background:rgba(19,31,28,.94)}}

/* ---- a phone: the chrome stacks above the map, the pane is tucked; an adaptation, not the design ---- */
@media (max-width:900px){
 .app{--lw:min(326px,calc(100vw - 32px))}
 .app,.app.tucked{--rail-x:var(--gap)}
 .app.mapfirst .parch{display:flex;flex-direction:column}
 .app.mapfirst .strip{position:relative;height:auto;flex:none}
 .app.mapfirst .strip .mast{height:auto;flex-wrap:wrap;gap:8px 12px;padding:8px 12px}
 .mast-note{display:none}
 .mast-right{margin-left:0;flex:1 1 100%}
 .app.mapfirst .strip .search{flex:1 1 140px;max-width:none}
 .app.mapfirst .strip .stand-bar{height:auto;flex-wrap:wrap;padding:6px 12px}
 .app.mapfirst .strip #you-btn{border-right:0;padding:4px 0;font-size:13px;gap:6px 10px;white-space:normal;flex-wrap:wrap}
 .app.mapfirst .sbtn.you #you-sum{flex:1 1 180px;font-size:13.5px;line-height:1.3;white-space:normal;text-align:left}
 .app.mapfirst .sbtn.you .at{flex:0 0 auto;font-size:13.5px}
 .paths{flex:1 1 100%;margin:4px 0 0;display:flex;overflow-x:auto;scrollbar-width:none;gap:0}
 .paths a.chip,.paths .tab-soon{flex:none;font-size:13px;padding:8px 12px;overflow:visible}
 .paths a.chip::before,.paths .tab-soon::before{display:none}
 .app.mapfirst #drawer-you{left:8px;right:8px;width:auto}
 .app.mapfirst .compass,.app.mapfirst .reopen{display:none}
 .mapfirst .cartouche.rail{display:none!important}
 .app.mapfirst .viewport{position:relative;inset:auto;flex:1;min-height:0;width:100%;height:auto}
 .site-foot{position:relative;bottom:auto;flex:none;height:24px;padding:0 10px;font-size:9.5px;gap:8px}
 .site-foot .f-credit{display:none}.site-foot:has(.m-credit) .f-na{display:block}
 .app.mapfirst .legend{display:none}
 .zstrip{left:8px;right:8px;width:auto;max-width:none;top:8px;overflow-x:auto;scrollbar-width:none}
 .app.mapfirst .zoom{right:8px;bottom:8px}
 .app.mapfirst #drawer-layers{right:54px;bottom:8px;width:min(284px,calc(100vw - 70px))}
 .trail{top:48px;padding:8px 12px}.trail::before{margin-bottom:3px}.trail .t-title{font-size:22px}
 .trail .race-icon{width:40px;height:40px;margin:16px 0 0 8px}.trail .t-meta{margin:16px 8px 0 0}.trail .t-at{font-size:15px}
 .trail .t-skill{margin:8px 8px 9px}
 .trail .dots{margin-top:8px;padding-top:6px;gap:4px}.trail .dot{padding:5px 8px 5px 5px}
}

/* the Find fish and oasis doors keep the older shell: only the wordmark's two lines are shared */
h1.brand small{display:block;font:600 9px/1 system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}

/* Alliance starts: a pin more than a quarter covered by another shows as a small dot at its true spot (app.js, the two-size rule) */
.mapfirst .pin.zd .gl,.mapfirst .pin.zd .gl.bdg{left:-4.5px;top:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--c,var(--gold));border:1.5px solid #14100a;box-shadow:0 0 0 1px #fff3;transform:none}
.mapfirst .pin.zd .gl>*{display:none}
.mapfirst .pin.zd .nm,.mapfirst .pin.zd .num{display:none!important}
.mapfirst .pin.zd::after{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%}
.mapfirst .pin.zd:hover .gl,.mapfirst .pin.zd:focus-visible .gl{transform:scale(1.5);box-shadow:0 0 0 2px #f0cf7e99}

.app.mapfirst #start-list .pick.home{border-color:var(--brass-2);box-shadow:inset 3px 0 0 var(--brass-2),0 0 0 1px var(--brass-2)}.app.mapfirst #start-list .pick.home b::after{content:"  ← go here";color:var(--brass-2);font:600 12px/1 var(--ui)}   /* the usual start for the race you just picked, when the map is elsewhere (Nate 11-01) */

/* ---- Round B lane A ---- */
.menu{position:relative}
.menu-btn{width:34px;height:34px;display:grid;place-items:center;padding:0;background:none;border:1px solid var(--brass-line);border-radius:3px;color:var(--brass-2);cursor:pointer}
.menu-btn:hover,.menu-btn[aria-expanded=true]{background:rgba(255,255,255,.07);border-color:var(--brass-2)}
.menu-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:170px;padding:4px;background:var(--pine-2);border:1px solid var(--brass-3);border-radius:3px;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.menu-pop[hidden]{display:none}
.menu-pop button{display:block;width:100%;text-align:left;padding:9px 12px;background:none;border:0;color:var(--cream);font:14px/1 var(--friz);cursor:pointer}
.menu-pop button:hover,.menu-pop button:focus-visible{background:rgba(255,255,255,.08);color:var(--brass-2)}
.about-wrap{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(5,12,10,.6)}
.about-wrap[hidden]{display:none}
.about-card{position:relative;width:min(460px,calc(100vw - 32px));padding:22px 26px 20px;background:var(--parchment);color:#2a1d10;border:2px solid var(--brass-3);border-radius:3px;box-shadow:0 16px 44px rgba(0,0,0,.65);font:14px/1.45 var(--ui)}
.about-card h2{margin:0 0 10px;font:21px/1 var(--friz)}.about-card p{margin:0 0 10px}
.about-na,.rs-note{font-size:12.5px;opacity:.8}
.about-x{position:absolute;top:6px;right:10px;background:none;border:0;font-size:22px;line-height:1;color:#2a1d10;cursor:pointer}
.app.mapfirst:not(.atlas):not(.drawer-open) .reopen:not([hidden]){display:flex;align-items:center;gap:6px;top:36%}   /* Nate 11-01: "move these tabs up some" */
.reopen-gl{width:16px;height:16px;fill:currentColor;flex:none}.reopen-gl:empty{display:none}
.app.mapfirst .dtab{top:58%}
@media (max-width:760px){.app.mapfirst .strip .search{flex:1 1 140px;max-width:none;margin:0}}
@media (min-width:1200px){.app.mapfirst .strip .mast{position:relative}.app.mapfirst .strip .mast .search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;flex:none;margin:0;z-index:40}}   /* Round B A: search dead centre on the desktop masthead */
@media (min-width:1200px){.app.mapfirst .strip .mast .search{position:static;transform:none;margin:0 auto;width:min(520px,40vw)}}   /* Nate 11-01: split the difference: centred in the free space between the mission line and the menu, off the crowded left */
/* Ratchet's name on the Durotar map: hover or focus opens a small card that jumps to the Barrens chart (Round B lane C) */
.region.region-link>span{pointer-events:auto;cursor:pointer}
.region-link .rg-card{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:0;padding:8px 10px 8px;min-width:150px;white-space:normal;text-align:left;text-transform:none;letter-spacing:0;font:400 12px/1.3 var(--sans,system-ui,sans-serif);background:var(--parchment,#f3e7c8);color:#2b2418;border:1px solid var(--brass-3);border-radius:6px;text-shadow:none;box-shadow:0 4px 14px #0006}
.region-link .rg-card::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.region-link>span:hover .rg-card,.region-link>span:focus-within .rg-card,.region-link>span:focus .rg-card{display:block}
.rg-card b{display:block;font:700 13px var(--serif,Georgia,serif);letter-spacing:0}
.rg-card small{display:block;opacity:.8;margin:2px 0 6px}
.rg-card a{color:var(--pine-3);font-weight:600}
.trail[data-chart=""]::before{display:none}
.trail[data-land="Eastern Kingdoms"]::before{letter-spacing:1.1px}   /* F-103 (L9-14): the longest continent name keeps its band on one line */

/* the crumb is names only now (Round B lane C); the other continent is a small tab on the side it lies on */
.zstrip #crumbs button[aria-current="true"]{cursor:default}
.zstrip #crumbs button[data-step="npc"]{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cont-tab{position:absolute;top:50%;z-index:7;transform:translateY(-50%);margin:0;padding:10px 6px;font:600 10px/1 Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--sand);background:var(--pine-2);border:1px solid var(--brass-line);cursor:pointer;writing-mode:vertical-rl}
#cont-tab:hover{color:var(--brass-2);border-color:var(--brass-strong)}
#cont-tab[data-side="right"]{right:0;border-right:0;border-radius:6px 0 0 6px}
#cont-tab[data-side="left"]{left:0;border-left:0;border-radius:0 6px 6px 0}
#cont-tab[hidden]{display:none}
/* Nate 11-01: the vertical tab at 74% sat on Steps & sources and the zoom on a 912px-tall window. Now a level chip on the
   bottom edge beside the zoom (right, rides --rail-x like .zoom) or at the bottom-left (Kalimdor from the east): no height maths. */
#cont-tab{top:auto;bottom:14px;transform:none;writing-mode:horizontal-tb;padding:9px 12px;font-size:11px;border:1px solid var(--brass-line);border-radius:3px;box-shadow:0 3px 10px #0008}
#cont-tab[data-side="right"]{right:calc(var(--rail-x) + 50px)}
#cont-tab[data-side="left"]{left:14px}