/* Jay's page: layouts Line, Spots and You in scheme 4 Blue field (BUILD-SPEC 4b; ported from
   hunt-assistant-2026-10-23/jay-app/schemes/mock/base.css with skins/blue-field.css, REUSED.md).
   Deep blue canvas, white cards, dark ink on cards, white on the canvas, the coral accent as a fill or mark only and
   never as text, topo green inside the map and on the gauge's public side. Text sizes scale with --ts (1 or 1.15). */
:root{
  --canvas:#0d3c88; --card:#ffffff; --surface-2:#eef2f7; --ink:#10213d; --ink-2:#34445e; --line:#d5dce7; --card-line:#ffffff; --card-edge:0px;
  --accent:#f2545b; --on-accent:#10213d; --accent-soft:rgba(242,84,91,.20); --public:#cfe2bd;
  --c-ink:#ffffff; --c-ink-2:#d8e3f5; --c-line:#3d65a6; --tabs-bg:#0d3c88; --tabs-line:#2b569b;
  --font-body:"Hanken Grotesk", system-ui, sans-serif; --font-display:"Sora", system-ui, sans-serif;
  --pin-bg:var(--ink); --pin-ink:#fff; --map-panel:var(--card);
  --ts:1; --r-card:14px; --pad:20px;
}
html[data-scale="1.15"]{--ts:1.15}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--canvas)}
body{font:400 calc(16px * var(--ts))/1.45 var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
button:disabled{cursor:default}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none !important}

.app{position:relative;width:100%;max-width:520px;height:100vh;height:100dvh;margin:0 auto;overflow:hidden;background:var(--canvas);display:flex;flex-direction:column}
.screens{flex:1;min-height:0;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.screen.fill{overflow-y:auto}
.screen::after{content:"";display:block;flex:none;height:76px}   /* room to scroll clear of the Ask button */
.job{min-width:0}

/* header on the canvas */
.head{padding:28px var(--pad) 14px;flex:none;position:relative}
.head h1{font:700 calc(32px * var(--ts))/1.1 var(--font-display);letter-spacing:-0.02em;color:var(--c-ink);text-wrap:balance}
.head .sub{margin-top:8px;font-size:calc(17px * var(--ts));line-height:1.4;color:var(--c-ink)}
.head .small{margin-top:4px;font-size:calc(15px * var(--ts));color:var(--c-ink-2)}
.head.with-moon{padding-right:96px}

/* cards */
.cards{display:flex;flex-direction:column;gap:10px;margin:0 var(--pad) 20px}
.cards > [data-card]{min-width:0}
.card{position:relative;background:var(--card);border-radius:var(--r-card);padding:16px;min-width:0}
.k{display:flex;align-items:center;gap:8px;font:600 calc(15px * var(--ts))/1.25 var(--font-body);color:var(--ink)}
.k .ic{width:20px;height:20px;flex:none}
.v{display:block;margin-top:8px;font:700 calc(30px * var(--ts))/1.1 var(--font-display);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.s{display:block;margin-top:4px;font-size:calc(15px * var(--ts));line-height:1.35;color:var(--ink-2)}
.ic{width:20px;height:20px}
.chev{width:22px;height:22px;color:var(--ink-2);flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font:600 calc(16px * var(--ts))/1.2 var(--font-body);text-align:center}
.btn.fill{background:var(--accent);color:var(--on-accent)}
.btn.line{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.btn.canvas{box-shadow:inset 0 0 0 1.5px var(--c-ink);color:var(--c-ink)}
.btn:disabled{opacity:.55}
.note{margin-top:10px;font-size:calc(15px * var(--ts));color:var(--ink-2)}
.c-note{margin:0 var(--pad) 12px;font-size:calc(15px * var(--ts));color:var(--c-ink-2)}

/* gauge (Line 4) */
.card-gauge .gauge{margin-top:14px}
.gauge-bar{position:relative;display:flex;height:28px;border-radius:8px;overflow:hidden}
.gauge-bar .priv{flex:0 0 34px;background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 7px);border-right:2px solid var(--ink)}
.gauge-bar .buzz{flex:0 0 5%;background:var(--accent);opacity:.55}
.gauge-bar .pub{flex:1;background:var(--public)}
.gauge-you{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff,0 1px 4px rgba(0,0,0,.35)}
.gauge-scale{position:relative;height:22px;margin-top:6px;font-size:calc(14px * var(--ts));color:var(--ink-2)}
.gauge-scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.gauge-scale span.end{transform:translateX(-100%)}
.gauge-key{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:calc(14px * var(--ts));color:var(--ink-2)}

/* weather row (Line 4) */
.wx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.card.wx{padding:12px 12px 13px;display:flex;flex-direction:column}
.card.wx .k{font-size:calc(14px * var(--ts));gap:6px;line-height:1.2;flex-direction:column;align-items:flex-start}
.card.wx .k .ic{width:18px;height:18px}
.card.wx .v{font-size:calc(21px * var(--ts));margin-top:8px;line-height:1.12}
.card.wx .s{font-size:calc(14px * var(--ts));line-height:1.3;margin-top:5px;display:flex;align-items:flex-start;gap:3px}
.card.wx .trend{flex:none;width:16px;height:16px;margin-top:1px;stroke-width:2.2}
.wx-foot{margin-top:6px;font-size:calc(14px * var(--ts));color:var(--c-ink-2)}

/* moon, up top on Line */
.moon{position:absolute;right:var(--pad);top:24px;display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;color:var(--c-ink)}
.moon svg{width:44px;height:44px;stroke:none}
.moon .mt{font-size:calc(14px * var(--ts));line-height:1.2;text-align:center;color:var(--c-ink-2)}

/* maps */
.card-map{padding:0;overflow:hidden;min-height:300px;flex:1}
.map-wrap{position:relative;height:100%;min-height:300px;border-radius:inherit;overflow:hidden;background:#dce8d0}
.map{position:absolute;inset:0}
.map-zoom{position:absolute;z-index:5;top:12px;right:12px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--map-panel);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.map-zoom button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.map-zoom button + button{border-top:1px solid var(--line)}
.map-zoom svg{width:20px;height:20px;stroke-width:2.2}
.map-note{position:absolute;left:12px;bottom:12px;z-index:5;max-width:calc(100% - 24px);padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font:600 calc(14px * var(--ts))/1.3 var(--font-body)}
.map-attr{left:auto;right:12px;bottom:12px;background:var(--card);color:var(--ink);font-weight:500;pointer-events:none}
.map-pill{position:absolute;left:12px;top:12px;z-index:5;min-height:44px}
.maplibregl-map{font-family:var(--font-body)}
.maplibregl-ctrl-attrib{font-size:14px !important;background:var(--map-panel) !important;color:var(--ink) !important}
.maplibregl-ctrl-attrib a{color:var(--ink) !important}
.maplibregl-ctrl-attrib-button{width:44px !important;height:44px !important}
.pin{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 12px 5px 9px;border-radius:999px;background:var(--pin-bg);color:var(--pin-ink);box-shadow:0 2px 6px rgba(0,0,0,.28);font:600 calc(14px * var(--ts))/1.2 var(--font-body)}
.pin i{width:10px;height:10px;border-radius:50%;background:var(--pin-ink);display:block}
.pin.truck i{border-radius:2px}
.pin.photo i{border-radius:2px;width:12px;height:9px}
.me-dot{width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff,0 0 0 26px rgba(242,84,91,.24)}
.anim-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.anim-layer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Spots 4: map and scrub first, the list in a sheet beneath */
.spots-stage{position:relative;flex:1 1 52%;min-height:240px}
.spots-stage .map{position:absolute;inset:0}
.spots-nomap{flex:none;padding:20px var(--pad) 8px}
.scrub{flex:none;padding:12px var(--pad) 12px}
.scrub-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.scrub-top b{font:600 calc(17px * var(--ts))/1.3 var(--font-body);color:var(--c-ink)}
.scrub-top span{font-size:calc(15px * var(--ts));color:var(--c-ink)}
.range{width:100%;height:44px;margin:4px 0 0;background:transparent;-webkit-appearance:none;appearance:none}
.range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--c-line)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff,0 1px 4px rgba(0,0,0,.35)}
.ticks{display:flex;justify-content:space-between;gap:12px;font-size:calc(14px * var(--ts));color:var(--c-ink);padding:0 4px}
.play-row{display:flex;align-items:center;gap:12px}
.play{flex:none;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.play svg{width:26px;height:26px;stroke-width:2.2}
.play-row .range{flex:1}
.gapnote{margin-top:2px;font-size:calc(15px * var(--ts));color:var(--c-ink)}
.list-sheet{flex:none;background:var(--card);border-radius:20px 20px 0 0;padding:6px 0 20px;min-height:200px}
.list-sheet .grab{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0 var(--pad);font:600 calc(17px * var(--ts))/1.3 var(--font-body);color:var(--ink)}
.list-sheet .grab small{font:400 calc(15px * var(--ts)) var(--font-body);color:var(--ink-2)}
.day-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:calc(100% - 2 * var(--pad));font:600 calc(18px * var(--ts))/1.3 var(--font-display);color:var(--ink);margin:10px var(--pad) 0}
.day-h small{font:500 calc(14px * var(--ts)) var(--font-body);color:var(--ink-2)}
.rows{margin:0 var(--pad)}
.rows > li + li{border-top:1px solid var(--line)}
.call-row{display:flex;align-items:center;gap:10px;min-height:56px;width:100%;font-size:calc(16px * var(--ts));color:var(--ink)}
.call-row .t{flex:1;min-width:0}
.call-row .t b{font-weight:600}
.marks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mark{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);font:600 calc(15px * var(--ts))/1 var(--font-body);color:var(--ink)}
.mark.static{box-shadow:none;background:var(--surface-2)}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.icon-btn svg{width:20px;height:20px;stroke-width:2.2}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:6px var(--pad) 10px}
.thumb{width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.logbox{margin:6px var(--pad) 12px;padding:12px 14px;border-radius:12px;background:var(--surface-2)}
.logbox .lt{font-size:calc(14px * var(--ts));color:var(--ink-2)}
.logbox p{margin-top:4px;font-size:calc(16px * var(--ts));color:var(--ink)}
.logbox .acts{display:flex;gap:8px;margin-top:8px;align-items:center}
.prompt-card{margin:12px var(--pad) 4px}
.reel-pill{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 calc(16px * var(--ts))/1 var(--font-body)}
.reel-pill svg{width:20px;height:20px}
.reel-row{margin:8px var(--pad) 0}
.from{margin:8px var(--pad) 0;font-size:calc(14px * var(--ts));color:var(--ink-2)}
.empty{margin:12px var(--pad);font-size:calc(16px * var(--ts));color:var(--ink-2)}

/* You 4 */
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.stepper button{width:64px;height:64px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.stepper button:disabled{opacity:.4}
.stepper button svg{width:26px;height:26px;stroke-width:2.2}
.stepper .n{text-align:center;font:700 calc(88px * var(--ts))/1 var(--font-display);letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stepper .n small{display:block;font:600 calc(20px * var(--ts))/1.2 var(--font-body);letter-spacing:0;margin-top:6px}
.toggle-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.toggle-card .k{font-size:calc(17px * var(--ts))}
.switch{position:relative;width:60px;height:44px;display:block;flex:none}
.switch::before{content:"";position:absolute;left:4px;top:7px;width:52px;height:30px;border-radius:15px;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.switch i{position:absolute;left:8px;top:11px;width:22px;height:22px;border-radius:50%;background:var(--ink-2);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.switch[aria-checked="true"]::before{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.switch[aria-checked="true"] i{transform:translateX(22px);background:var(--on-accent)}
.pills{display:flex;gap:8px;margin-top:12px}
.pills button{flex:1;min-height:44px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ink-2);text-align:center;font-size:calc(15px * var(--ts));font-weight:600;color:var(--ink)}
.pills button[aria-checked="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin:0 var(--pad);font-size:calc(17px * var(--ts));color:var(--c-ink);border-top:1px solid var(--c-line);width:calc(100% - 2 * var(--pad))}
.link-row span:last-child{display:flex;align-items:center;gap:4px;color:var(--c-ink-2)}
.link-row .chev{color:var(--c-ink-2)}
.you-box .link-row{margin:0;width:100%;border-top:0;border-bottom:1px solid var(--c-line)}
.spots-title{flex:none;margin:12px var(--pad) 0;font:600 calc(17px * var(--ts))/1.3 var(--font-body);color:var(--c-ink)}
.hold{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;margin-top:12px;border-radius:20px;padding:12px 16px;box-shadow:inset 0 0 0 3px var(--accent);user-select:none;-webkit-user-select:none;touch-action:none;font:600 calc(18px * var(--ts))/1.3 var(--font-body);color:var(--ink)}
.hold.on{background:var(--accent-soft)}
.hold .mic{flex:none;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.hold .mic svg{width:24px;height:24px;stroke-width:2}
.heard{margin-top:12px;font-size:calc(17px * var(--ts));line-height:1.4;color:var(--ink)}
.row-acts{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.trip-rows{margin-top:8px}
.trip-rows > div{padding:10px 0;border-top:1px solid var(--line)}
.trip-rows > div:first-child{border-top:0}
.trip-rows label,.trip-rows .lab{display:block;font:600 calc(16px * var(--ts))/1.3 var(--font-body);color:var(--ink)}
.trip-rows .val{margin-top:2px;font-size:calc(15px * var(--ts));color:var(--ink-2)}
.dates{display:flex;gap:8px;margin-top:6px}
.dates input{flex:1;min-width:0;height:48px;border-radius:10px;border:1px solid var(--ink-2);background:#fff;color:var(--ink);padding:0 10px;font-size:calc(16px * var(--ts))}
.pin-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pin-acts .btn{min-height:44px;padding:0 14px;font-size:calc(15px * var(--ts))}
.pick-map{position:relative;height:220px;margin-top:8px;border-radius:12px;overflow:hidden;background:#dce8d0}
.msg{margin-top:10px;font-size:calc(15px * var(--ts));color:var(--ink)}
.app-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin:4px var(--pad) 20px;font-size:calc(16px * var(--ts));color:var(--c-ink)}
.app-line a,.app-line button{color:var(--c-ink);text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}

/* Onboarding: the trip card before the tabs */
.onboard{position:absolute;inset:0;z-index:900;overflow-y:auto;background:var(--canvas)}
.onboard .cards{margin-top:4px}

/* tab bar */
.tabs{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 10px 14px;background:var(--tabs-bg);border-top:1px solid var(--tabs-line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:56px;justify-content:center;color:var(--c-ink-2);font-size:calc(14px * var(--ts));line-height:1.1;text-align:center}
.tab-ic{display:flex;align-items:center;justify-content:center;width:60px;height:30px;border-radius:15px}
.tab-ic svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--c-ink);font-weight:600}
.tab[aria-current="page"] .tab-ic{background:var(--accent);color:var(--on-accent)}

/* Ask: the floating button, its sheet and the Undo pill */
.ask-fab{position:absolute;right:16px;bottom:96px;z-index:800;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.3);font:700 calc(16px * var(--ts))/1 var(--font-body)}
.ask-fab svg{width:20px;height:20px}
.undo-pill{position:absolute;left:16px;bottom:96px;z-index:800;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font:600 calc(15px * var(--ts))/1.2 var(--font-body);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-btn{min-height:44px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ink-2);font-size:calc(15px * var(--ts));color:var(--ink)}
.ask-input{width:100%;min-height:96px;margin-top:12px;border-radius:12px;border:1px solid var(--ink-2);padding:10px 12px;font-size:calc(16px * var(--ts));color:var(--ink);background:#fff;resize:vertical}
.thread{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.thread p{padding:10px 12px;border-radius:12px;font-size:calc(16px * var(--ts));line-height:1.4}
.thread .me{align-self:flex-end;background:var(--surface-2);color:var(--ink);max-width:85%}
.thread .them{align-self:flex-start;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);max-width:92%}

/* sheets */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:1000}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 48px);z-index:1001;background:var(--card);border-radius:20px 20px 0 0;overflow-y:auto;overflow-x:hidden;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.sheet.tall{top:48px}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px var(--pad);background:var(--card);border-bottom:1px solid var(--line)}
.sheet-head h2{font:700 calc(22px * var(--ts))/1.2 var(--font-display);color:var(--ink)}
.close{min-height:44px;min-width:64px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);text-align:center;font-weight:600;color:var(--ink)}
.sheet-body{padding:12px var(--pad) 28px}
.sheet-body h3{margin:18px 0 6px;font:600 calc(16px * var(--ts))/1.3 var(--font-body);color:var(--ink)}
.sheet-body textarea{width:100%;min-height:140px;border-radius:12px;border:1px solid var(--ink-2);padding:10px 12px;font-size:calc(16px * var(--ts));color:var(--ink)}
.choice{display:flex;gap:10px;margin-top:12px}
.choice .btn{flex:1}
.reel-video{display:block;width:100%;max-height:70vh;background:#000;border-radius:12px}

@media (min-width:700px){ .app{border-left:1px solid var(--tabs-line);border-right:1px solid var(--tabs-line)} }
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* Map controls use the existing field panel, typography and 44px touch targets. */
.map-layers{position:absolute;top:12px;left:12px;z-index:5;max-width:calc(100% - 80px);max-height:calc(100% - 58px);overflow:auto;border-radius:12px;background:var(--map-panel);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.2);font:500 calc(14px * var(--ts))/1.35 var(--font-body)}
.map-layers summary{padding:12px;min-height:44px;cursor:pointer;box-sizing:border-box;font-weight:600}
.map-layers label{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 12px}
.map-layers input{width:20px;height:20px;accent-color:var(--ink)}
.map-layers p{max-width:250px;padding:8px 12px;margin:0;border-top:1px solid var(--line)}
.map-readout{position:absolute;left:12px;right:12px;bottom:38px;z-index:4;border-radius:12px;padding:10px 12px;background:var(--map-panel);color:var(--ink);font:600 calc(14px * var(--ts))/1.35 var(--font-body);pointer-events:none}

.map-footer{position:absolute;left:12px;right:12px;bottom:8px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}
.map-footer .map-readout{position:static;margin:0;width:100%;box-sizing:border-box}
.map-footer .map-attr{position:static;margin:0;max-width:100%;font-size:calc(10px * var(--ts));padding:3px 7px;border-radius:6px;align-self:flex-end}
.map-wrap .map-pill{top:64px}
.map-layers[open]{z-index:6}

.map-compass{border-top:1px solid var(--line)}
.map-compass .compass-heading{font-size:calc(22px * var(--ts));font-weight:600;border:0}
.map-compass .compass-quality{border:0}
.map-compass p{max-width:250px}