/* =====================================================================
   FIELD KIT (M): a full-screen survey device, not a pause menu.
   The map is the screen; everything else is instrument chrome over it.
   ===================================================================== */
#field { position: absolute; inset: 0; background: #07090a; overflow: hidden; animation: kitIn .35s var(--a-ease); --dev: #7fd6c2; --dev-dim: rgba(127,214,194,.55); --dev-line: rgba(127,214,194,.16); }
@keyframes kitIn { from { opacity: 0; filter: brightness(2) saturate(0); } }
.pmap { position: absolute; inset: 0; background: #07090a; }
/* = the Mars tiles' own background (tools/build_mars_tiles.py BG): empty tiles are not shipped, so this shows instead */
#mars.leaflet-container { background: #0c0807; }
#mars .leaflet-pane.leaflet-overlay-pane svg .mars-contour { fill: none; stroke: rgba(255,150,100,.12); stroke-width: 1; }

/* device glass: scanlines, vignette, bezel corners */
.pda-fx { position: absolute; inset: 0; pointer-events: none; z-index: 500; transform: translateZ(0); /* own layer: never re-rastered as the map moves */
    background:
        radial-gradient(ellipse 75% 70% at 50% 52%, transparent 55%, rgba(0,0,0,.72) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
        linear-gradient(rgba(127,214,194,.035) 1px, transparent 1px) 0 0 / calc(8 * var(--kh)) calc(8 * var(--kh)),
        linear-gradient(90deg, rgba(127,214,194,.035) 1px, transparent 1px) 0 0 / calc(8 * var(--kh)) calc(8 * var(--kh)); }
.pda-fx::before, .pda-fx::after { content: ''; position: absolute; width: calc(4 * var(--kh)); height: calc(4 * var(--kh)); border: solid var(--dev-dim); }
.pda-fx::before { top: calc(1.4 * var(--kh)); left: calc(1.4 * var(--kh)); border-width: 2px 0 0 2px; }
.pda-fx::after { bottom: calc(1.4 * var(--kh)); right: calc(1.4 * var(--kh)); border-width: 0 2px 2px 0; }

/* ---------------------------------------------------------------- top strip */
#pda-top { position: absolute; top: 0; left: 0; right: 0; z-index: 600; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
    padding: calc(2.4 * var(--kh)) calc(2.6 * var(--kw)) calc(5 * var(--kh)); background: linear-gradient(180deg, rgba(4,5,5,.94) 30%, rgba(4,5,5,.6) 70%, transparent); pointer-events: none; }
#pda-top > * { pointer-events: auto; }
.pt-dev { display: flex; align-items: center; gap: calc(.6 * var(--kw)); font-family: var(--a-mono); font-size: calc(1.2 * var(--kh)); letter-spacing: .3em; color: var(--dev); }
.pt-dev i { display: flex; font-size: calc(1.8 * var(--kh)); animation: devSpin 4s linear infinite; }
@keyframes devSpin { to { transform: rotate(360deg); } }
.pt-dev em { font-style: normal; color: var(--dev-dim); letter-spacing: .1em; }
.pt-who { margin-top: calc(1 * var(--kh)); display: flex; align-items: baseline; gap: calc(.9 * var(--kw)); }
.pt-who b { font-family: var(--a-head); font-weight: 700; font-size: calc(2.6 * var(--kh)); letter-spacing: .12em; text-transform: uppercase; }
.pt-who span { font-family: var(--a-head); font-weight: 600; font-size: calc(1.4 * var(--kh)); letter-spacing: .25em; text-transform: uppercase; color: var(--a-amber); }
.pt-zone { text-align: center; }
.pt-tier { display: inline-block; font-family: var(--a-head); font-weight: 700; font-size: calc(1.2 * var(--kh)); letter-spacing: .45em; text-transform: uppercase; padding: calc(.35 * var(--kh)) calc(1 * var(--kw)); box-shadow: inset 0 0 0 1px currentColor; }
.pt-tier.safe { color: var(--a-toxic); } .pt-tier.contested { color: var(--a-amber); } .pt-tier.black { color: #ff6b5b; background: rgba(210,56,44,.14); }
.pt-zone h1 { font-family: var(--a-head); font-weight: 700; font-size: calc(4 * var(--kh)); letter-spacing: .22em; text-transform: uppercase; line-height: 1; margin: calc(.9 * var(--kh)) 0 calc(1.1 * var(--kh)); text-shadow: 0 calc(.3 * var(--kh)) calc(2 * var(--kh)) #000; }
.pt-planet { display: inline-flex; padding: calc(.35 * var(--kh)); gap: calc(.3 * var(--kh)); background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px var(--dev-line); }
.pt-planet button { display: flex; align-items: center; gap: calc(.5 * var(--kw)); padding: calc(.55 * var(--kh)) calc(1.1 * var(--kw)); font-family: var(--a-head); font-weight: 600; font-size: calc(1.3 * var(--kh)); letter-spacing: .3em; text-transform: uppercase; color: var(--a-mute); transition: .15s; }
.pt-planet button i { display: flex; font-size: calc(1.6 * var(--kh)); }
.pt-planet button.on { color: var(--a-ink); background: var(--dev); }
.pt-planet button[data-planet="mars"].on { background: #ff8a5c; }
.pt-read { justify-self: end; display: flex; gap: calc(2 * var(--kw)); }
.pt-read div { text-align: right; }
.pt-read span { display: block; font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .3em; text-transform: uppercase; color: var(--dev-dim); }
.pt-read b { font-family: var(--a-head); font-weight: 700; font-size: calc(2.8 * var(--kh)); letter-spacing: .06em; }
.pt-read b.t1 { color: var(--a-toxic); } .pt-read b.t2 { color: var(--a-amber); } .pt-read b.t3, .pt-read b.t4 { color: var(--a-ember); } .pt-read b.t5 { color: #ff5a48; animation: evPulse 1s infinite; }
.pt-read b.good { color: var(--a-toxic); } .pt-read b.bad { color: #ff6b5b; }

/* ---------------------------------------------------------------- rail */
#rail { position: absolute; z-index: 610; left: calc(2 * var(--kw)); top: calc(14 * var(--kh)); bottom: calc(10 * var(--kh)); width: calc(13.5 * var(--kw)); display: flex; flex-direction: column; gap: calc(.3 * var(--kh)); overflow-y: auto;
    padding: calc(1.2 * var(--kh)) 0; background: linear-gradient(90deg, rgba(5,6,6,.95), rgba(5,6,6,.86)); box-shadow: inset 0 0 0 1px var(--dev-line); transform: translateZ(0); }
.rl-h { padding: calc(1.4 * var(--kh)) calc(1.1 * var(--kw)) calc(.6 * var(--kh)); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .35em; text-transform: uppercase; color: var(--dev-dim); }
.rl { position: relative; display: grid; grid-template-columns: calc(2.6 * var(--kh)) 1fr auto; gap: calc(.8 * var(--kw)); align-items: center; padding: calc(.95 * var(--kh)) calc(1.1 * var(--kw)); text-align: left; transition: background .15s, color .15s; color: var(--a-dim); }
.rl i { display: flex; font-size: calc(2 * var(--kh)); }
.rl span { font-family: var(--a-head); font-weight: 600; font-size: calc(1.75 * var(--kh)); letter-spacing: .14em; text-transform: uppercase; }
.rl kbd { font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); color: var(--a-mute); box-shadow: inset 0 0 0 1px var(--a-line); padding: calc(.1 * var(--kh)) calc(.4 * var(--kh)); }
.rl em { font-style: normal; font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); padding: calc(.1 * var(--kh)) calc(.5 * var(--kh)); color: var(--a-ink); background: var(--a-amber); }
.rl:hover { color: var(--a-white); background: rgba(127,214,194,.06); }
/* selected = the kit menu treatment (.a-menu__item.on): amber corner brackets settle in, the label lights up.
   Both brackets live on ::before (four hairline strokes) so ::after stays free for the .ext chevron. */
.rl::before { content: ''; position: absolute; inset: calc(.35 * var(--kh)) calc(.5 * var(--kw)); pointer-events: none; opacity: 0; transform: scale(1.06, 1.3);
    transition: opacity .25s, transform .3s var(--a-ease);
    background:
        linear-gradient(var(--a-amber), var(--a-amber)) left top / calc(1.1 * var(--kh)) 2px no-repeat,
        linear-gradient(var(--a-amber), var(--a-amber)) left top / 2px calc(1.1 * var(--kh)) no-repeat,
        linear-gradient(var(--a-amber), var(--a-amber)) right bottom / calc(1.1 * var(--kh)) 2px no-repeat,
        linear-gradient(var(--a-amber), var(--a-amber)) right bottom / 2px calc(1.1 * var(--kh)) no-repeat; }
.rl.on { color: var(--a-amber); background: rgba(240,180,74,.06); }
.rl.on::before { opacity: 1; transform: none; }
.rl.on span { color: var(--a-white); }
.rl.on i { color: var(--a-amber); }
.rl.ext::after { content: ''; position: absolute; right: calc(.7 * var(--kw)); top: 50%; width: calc(.5 * var(--kh)); height: calc(.5 * var(--kh)); border: solid var(--a-mute); border-width: 1px 1px 0 0; transform: translateY(-50%) rotate(45deg); }
.rl.ext kbd + ::after, .rl.ext:has(kbd)::after { display: none; }
.rl-sp { flex: 1; min-height: calc(1 * var(--kh)); }
.rl-pause { margin: 0 calc(1.1 * var(--kw)); padding: calc(1 * var(--kh)) 0 calc(.2 * var(--kh)); border-top: 1px solid var(--a-line); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .2em; color: var(--a-mute); display: flex; justify-content: space-between; cursor: pointer; }
.rl-pause:hover { color: var(--a-white); }

/* ---------------------------------------------------------------- orientation guide (apoc_tutorial → SetGuide)
   The guided rail item wakes as a kit card (.k-host.active > .k-frame, spinning blade). The callout is a static kit card
   docked in the rail right under it (never over the map or a sheet); the chevron folds it to one line. Tones: prompt =
   danger ("open this"), explain = loot (this section; Continue). */
.rl.guide { color: #fff; border-radius: calc(.7 * var(--kh)); margin: 0 calc(.5 * var(--kw)); padding-left: calc(.6 * var(--kw)); padding-right: calc(.6 * var(--kw)); }
.rl.guide.on::before { display: none; }
.rl.guide > .gc-frame { --k-card-bg: linear-gradient(90deg, rgba(34, 18, 13, .96), rgba(12, 10, 9, .96)); }
.rl.guide i { color: var(--a-white); }
#guide-call { flex: none; margin: calc(.5 * var(--kh)) calc(.5 * var(--kw)) calc(1 * var(--kh)); padding: calc(1.3 * var(--kh)) calc(1.2 * var(--kh)) calc(1.4 * var(--kh)) calc(1.4 * var(--kh)); border-radius: calc(.9 * var(--kh));
    --k-card-bg: linear-gradient(180deg, rgba(20, 14, 11, .97), rgba(10, 8, 7, .97));
    font: 500 calc(1.4 * var(--kh))/1.45 var(--a-body); color: rgba(243, 238, 230, .9); }
#guide-call.hidden { display: none; }
.gc-head { display: flex; align-items: center; gap: calc(.8 * var(--kh)); }
.gc-head b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 calc(1.12 * var(--kh)) var(--a-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--k-tone); }
.gc-fold { flex: none; display: grid; place-items: center; width: calc(2.4 * var(--kh)); height: calc(2.4 * var(--kh)); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(243, 238, 230, .06); color: var(--a-dim); box-shadow: inset 0 0 0 1px var(--a-line); transition: color .2s, background .2s; }
.gc-fold:hover { color: #fff; background: rgba(243, 238, 230, .12); }
.gc-fold .a-ico, .gc-fold svg { width: calc(1.5 * var(--kh)); height: calc(1.5 * var(--kh)); transform: rotate(180deg); transition: transform .25s var(--a-ease); }
#guide-call.folded .gc-fold .a-ico, #guide-call.folded .gc-fold svg { transform: none; }
.gc-text { margin: calc(.8 * var(--kh)) 0 0; }
.gc-go { margin-top: calc(1.2 * var(--kh)); }
#guide-call.folded .gc-text { display: none; }

/* ---------------------------------------------------------------- intel column */
#intel { position: absolute; z-index: 610; right: calc(2 * var(--kw)); top: calc(14 * var(--kh)); bottom: calc(10 * var(--kh)); width: calc(21 * var(--kw)); display: flex; flex-direction: column; gap: calc(1.2 * var(--kh)); }
/* No backdrop blur over the map: a blur is recomputed every frame the map under it moves (that, plus a DOM marker
   per point, is what held the kit at 12 fps). A denser panel reads the same. */
.in-card { position: relative; padding: calc(1.5 * var(--kh)) calc(1.1 * var(--kw)); background: linear-gradient(180deg, rgba(5,6,6,.95), rgba(5,6,6,.88)); box-shadow: inset 0 0 0 1px var(--dev-line); transform: translateZ(0); }
.in-h { display: flex; align-items: center; gap: calc(.6 * var(--kw)); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .35em; text-transform: uppercase; color: var(--dev); margin-bottom: calc(1 * var(--kh)); }
.in-h i { display: flex; font-size: calc(1.5 * var(--kh)); }
.in-h em { margin-left: auto; font-style: normal; color: var(--dev-dim); letter-spacing: .1em; }
.in-obj { box-shadow: inset 0 0 0 1px var(--dev-line), inset 0 2px 0 var(--a-amber); }
.in-obj b { display: block; font-family: var(--a-head); font-weight: 700; font-size: calc(2.3 * var(--kh)); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.in-obj span { display: block; margin-top: calc(.6 * var(--kh)); font-size: calc(1.45 * var(--kh)); line-height: 1.5; color: var(--a-dim); }
.in-go { margin-top: calc(1.2 * var(--kh)); display: inline-flex; align-items: center; gap: calc(.5 * var(--kw)); padding: calc(.7 * var(--kh)) calc(.9 * var(--kw)); font-family: var(--a-head); font-weight: 700; font-size: calc(1.2 * var(--kh)); letter-spacing: .3em; text-transform: uppercase; color: var(--a-amber); box-shadow: inset 0 0 0 1px rgba(240,180,74,.5); }
.in-go:hover { background: var(--a-amber); color: var(--a-ink); }
.in-go i { display: flex; font-size: calc(1.5 * var(--kh)); }
.in-near { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#f-near { flex: 1; overflow-y: auto; margin: 0 calc(-.4 * var(--kw)); padding-right: calc(.3 * var(--kw)); }
.sig-h { display: flex; align-items: center; gap: calc(.6 * var(--kw)); padding: calc(1.2 * var(--kh)) calc(.4 * var(--kw)) calc(.5 * var(--kh)); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .3em; text-transform: uppercase; color: var(--dev-dim); }
.sig-h:first-child { padding-top: calc(.2 * var(--kh)); }
.sig-h::after { content: ''; flex: 1; order: 1; height: 1px; background: linear-gradient(90deg, var(--dev-line), transparent); }
.sig-h em { order: 2; font-style: normal; letter-spacing: .05em; color: var(--a-mute); }
.sig-h--distress { color: #ff8a7a; }
.sig { position: relative; width: 100%; display: grid; grid-template-columns: calc(3 * var(--kh)) 1fr auto; gap: calc(.7 * var(--kw)); align-items: center; padding: calc(.8 * var(--kh)) calc(.4 * var(--kw)); text-align: left; border-bottom: 1px solid var(--a-line); transition: background .15s; }
.sig::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: var(--tc, var(--a-amber)); opacity: 0; transition: opacity .15s; }
.sig:hover { background: rgba(127,214,194,.06); }
.sig:hover::before { opacity: 1; }
.sig .g { width: calc(3 * var(--kh)); height: calc(3 * var(--kh)); display: grid; place-items: center; font-size: calc(1.55 * var(--kh)); color: var(--tc, var(--a-amber)); border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.06), rgba(8,7,6,.9)); box-shadow: inset 0 0 0 1.5px var(--tc, var(--a-amber)), 0 0 calc(1 * var(--kh)) color-mix(in srgb, var(--tc, #f0b44a) 35%, transparent); }
.sig .g .a-ico { width: calc(1.6 * var(--kh)); height: calc(1.6 * var(--kh)); }
.sig .g b { font: 700 calc(1.4 * var(--kh)) var(--a-head); }
.sig .t { min-width: 0; }
.sig b { display: block; font-family: var(--a-head); font-weight: 600; font-size: calc(1.55 * var(--kh)); letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig small { display: block; font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .08em; color: var(--a-mute); margin-top: calc(.2 * var(--kh)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig .d { display: flex; align-items: center; justify-content: flex-end; gap: calc(.4 * var(--kw)); font-family: var(--a-mono); font-size: calc(1.2 * var(--kh)); color: var(--a-dim); white-space: nowrap; }
.sig .d i { display: inline-block; font-style: normal; font-size: calc(1.4 * var(--kh)); color: var(--dev-dim); transform-origin: center; }
.sig-empty { padding: calc(1.6 * var(--kh)) calc(.4 * var(--kw)); font-size: calc(1.35 * var(--kh)); line-height: 1.6; color: var(--a-mute); }
/* Layer toggles: a lit LED and a tone hairline when on (the kit switch language, compact enough for eleven). */
#f-layers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.45 * var(--kh)) calc(.45 * var(--kw)); }
.ly { position: relative; display: flex; align-items: center; gap: calc(.55 * var(--kw)); padding: calc(.62 * var(--kh)) calc(.6 * var(--kw)); font-family: var(--a-head); font-weight: 600; font-size: calc(1.15 * var(--kh)); letter-spacing: .16em; text-transform: uppercase;
    color: var(--a-mute); box-shadow: inset 0 0 0 1px var(--a-line); text-align: left; border-radius: calc(.5 * var(--kh)); transition: color .15s, box-shadow .15s, background .15s; }
.ly span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly i { width: calc(.9 * var(--kh)); height: calc(.9 * var(--kh)); flex: none; border-radius: 50%; background: var(--c, #fff); opacity: .28; transition: opacity .15s, box-shadow .15s; }
.ly:hover { color: var(--a-dim); box-shadow: inset 0 0 0 1px var(--a-faint); }
.ly.on { color: var(--a-white); background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 calc(1.2 * var(--kh)) color-mix(in srgb, var(--c) 14%, transparent); }
.ly.on i { opacity: 1; box-shadow: 0 0 calc(.8 * var(--kh)) var(--c), 0 0 calc(.2 * var(--kh)) var(--c); }
.ly-staff { grid-column: 1 / -1; box-shadow: inset 0 0 0 1px rgba(176,140,255,.22); }
.ly-staff::after { content: 'Admin only'; margin-left: auto; font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .1em; color: rgba(176,140,255,.7); }

/* ---------------------------------------------------------------- map marks (marks.js) */
.mk-canvas { pointer-events: none; }
.leaflet-container { cursor: url('cursors/grab.svg') 16 16, grab; }
.leaflet-container.mk-over { cursor: url('cursors/pointer.svg') 16 16, pointer; }
/* Active danger: a slow ring, transform and opacity only (compositor), never a filter. */
.mk-halo { pointer-events: none; }
.mk-halo i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--tc, #ff4b3a);
    opacity: 0; animation: mkHalo 2.4s cubic-bezier(.2,.7,.3,1) infinite; will-change: transform, opacity; }
@keyframes mkHalo { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
#mk-tip { position: absolute; left: 0; top: 0; z-index: 700; pointer-events: none; min-width: calc(16 * var(--kh)); max-width: calc(36 * var(--kh)); padding: calc(1.1 * var(--kh)) calc(1.3 * var(--kh)) calc(1.2 * var(--kh));
    border-radius: calc(.8 * var(--kh)); background: linear-gradient(180deg, rgba(20,16,13,.97), rgba(9,8,7,.97)); box-shadow: inset 0 0 0 1px var(--a-faint), 0 calc(1 * var(--kh)) calc(3 * var(--kh)) rgba(0,0,0,.6); }
#mk-tip.hidden { display: none; }
#mk-tip .mt-k { display: flex; align-items: center; gap: calc(.7 * var(--kh)); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .18em; text-transform: uppercase; color: var(--tc); }
#mk-tip .mt-k::before { content: ''; width: calc(.8 * var(--kh)); height: calc(.8 * var(--kh)); border-radius: 50%; background: var(--tc); box-shadow: 0 0 calc(.8 * var(--kh)) var(--tc); }
#mk-tip b { display: block; margin-top: calc(.6 * var(--kh)); font-family: var(--a-head); font-weight: 700; font-size: calc(1.9 * var(--kh)); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; color: var(--a-white); }
#mk-tip .mt-d { margin-top: calc(.5 * var(--kh)); font-family: var(--a-mono); font-size: calc(1.2 * var(--kh)); color: var(--a-dim); }
#mk-tip .mt-row { display: grid; grid-template-columns: calc(1 * var(--kh)) 1fr auto; gap: calc(.9 * var(--kh)); align-items: center; margin-top: calc(.7 * var(--kh)); font-family: var(--a-head); font-weight: 600; font-size: calc(1.4 * var(--kh)); letter-spacing: .06em; text-transform: uppercase; color: var(--a-white); }
#mk-tip .mt-row i { width: calc(.8 * var(--kh)); height: calc(.8 * var(--kh)); border-radius: 50%; background: var(--tc); box-shadow: 0 0 calc(.6 * var(--kh)) var(--tc); }
#mk-tip .mt-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mk-tip .mt-row em { font-style: normal; font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); color: var(--a-mute); }
#mk-tip .mt-more, #mk-tip .mt-hint { margin-top: calc(.7 * var(--kh)); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .1em; color: var(--a-mute); }
#mk-tip .mt-hint { color: var(--dev-dim); text-transform: uppercase; letter-spacing: .2em; }

/* ---------------------------------------------------------------- sheet (status, squad) */
#sheet { position: absolute; z-index: 605; left: calc(calc(2 * var(--kw)) + calc(13.5 * var(--kw)) + calc(.8 * var(--kw))); right: calc(calc(2 * var(--kw)) + calc(21 * var(--kw)) + calc(.8 * var(--kw))); top: calc(14 * var(--kh)); bottom: calc(10 * var(--kh)); overflow-y: auto;
    padding: calc(2.6 * var(--kh)) calc(2 * var(--kw)); background: linear-gradient(180deg, rgba(8,9,9,.96), rgba(8,9,9,.92)); box-shadow: inset 0 0 0 1px var(--dev-line), 0 calc(3 * var(--kh)) calc(8 * var(--kh)) rgba(0,0,0,.7);
    animation: sheetIn .3s var(--a-ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateX(calc(-2 * var(--kw))); } }
#field.sheet-on .pmap { filter: brightness(.45) saturate(.6); transition: filter .3s; }
/* Back: a neutral kit comet button pinned top-left of every sheet (sticky, so it stays while the sheet scrolls),
   with where it goes. Esc and Backspace do the same. */
.sheet-nav { position: sticky; top: calc(-2.6 * var(--kh)); z-index: 5; display: flex; align-items: center; gap: calc(1.2 * var(--kw)); margin: calc(-2.6 * var(--kh)) calc(-2 * var(--kw)) calc(1.8 * var(--kh)); padding: calc(2.2 * var(--kh)) calc(2 * var(--kw)) calc(1.4 * var(--kh));
    background: linear-gradient(180deg, rgba(8,9,9,.98) 70%, rgba(8,9,9,0)); }
.sheet-x.k-btn { letter-spacing: .22em; }
.sheet-x.k-btn i { display: flex; font-size: calc(1.5 * var(--kh)); margin-left: calc(-.3 * var(--kh)); }
.sheet-crumb { display: inline-flex; align-items: center; gap: calc(.5 * var(--kh)); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .2em; text-transform: uppercase; color: var(--dev-dim); }
.sheet-crumb kbd { font-family: var(--a-mono); font-size: calc(1.05 * var(--kh)); letter-spacing: 0; padding: calc(.15 * var(--kh)) calc(.45 * var(--kh)); color: var(--a-dim); box-shadow: inset 0 0 0 1px var(--a-faint); }
.sheet-crumb b { margin-left: calc(.3 * var(--kh)); font-weight: 600; color: var(--dev); }
.sh > .a-title { margin: calc(.4 * var(--kh)) 0 calc(2.4 * var(--kh)); }
#sheet .ov-grid { grid-template-columns: 1fr 1fr; }
#sheet .sq-grid { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- footer */
#pda-foot { position: absolute; z-index: 600; left: 0; right: 0; bottom: 0; height: calc(9 * var(--kh)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 calc(2 * var(--kw));
    background: linear-gradient(0deg, rgba(4,5,5,.92) 20%, transparent); pointer-events: none; }
#pda-foot > * { pointer-events: auto; }
.pf-coords { font-family: var(--a-mono); font-size: calc(1.2 * var(--kh)); letter-spacing: .15em; color: var(--dev-dim); padding-left: calc(.4 * var(--kw)); }
.pf-hints { display: flex; gap: calc(1.6 * var(--kw)); font-family: var(--a-head); font-weight: 600; font-size: calc(1.15 * var(--kh)); letter-spacing: .25em; text-transform: uppercase; color: var(--a-mute); }
.pf-hints span { display: flex; align-items: center; }
.pf-hints kbd { font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: 0; padding: calc(.15 * var(--kh)) calc(.45 * var(--kh)); margin-right: calc(.5 * var(--kh)); color: var(--a-dim); box-shadow: inset 0 0 0 1px var(--a-faint); }
#pda-foot .map-tools { position: static; justify-self: end; flex-direction: row; }
#pda-foot .map-tools button { width: calc(4.2 * var(--kh)); height: calc(4.2 * var(--kh)); display: grid; place-items: center; font-size: calc(2 * var(--kh)); background: rgba(5,6,6,.9); box-shadow: inset 0 0 0 1px var(--dev-line); }
#pda-foot .map-tools button:hover { color: var(--a-ink); background: var(--dev); }

/* ---------------------------------------------------------------- map marks (field-only) */
.mk-mate { width: 16px; height: 16px; border-radius: 50%; background: var(--a-toxic); box-shadow: 0 0 0 3px rgba(10,9,8,.85), 0 0 12px var(--a-toxic); }
.mk-wp { width: 22px; height: 30px; }
.mk-wp svg { width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(127,214,194,.9)); }
.mk-cache { width: 22px; height: 22px; display: grid; place-items: center; font: 700 12px var(--a-head); color: #1a0b06; background: #ff8a5c; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 10px #ff8a5c; }
.mk-label .lbl.dev { color: var(--dev); }

/* apoc_squads: allies, oathbreakers, downed mates, pings, territories */
.mk-mate.ally { background: var(--a-oxy); box-shadow: 0 0 0 3px rgba(10,9,8,.85), 0 0 12px var(--a-oxy); }
.mk-mate.oath { background: #ff8a1e; box-shadow: 0 0 0 3px rgba(10,9,8,.85), 0 0 14px #ff8a1e; }
.mk-mate.down { background: var(--a-blood); animation: evPulse 1s ease-in-out infinite; }
.mk-ev.mk-ping_location { background: #e8e1d3; }
.mk-ev.mk-ping_danger, .mk-ev.mk-ping_enemy { background: #e04040; color: #fff; animation: evPulse 1s ease-in-out infinite; }
.mk-ev.mk-ping_infected { background: #9bd13b; }
.mk-ev.mk-ping_loot { background: #e0a33a; }
.mk-ev.mk-ping_vehicle { background: #5cc8e2; }
.mk-ev.mk-ping_flare { background: var(--tc, #ffb02e); box-shadow: 0 0 0 2px rgba(10, 9, 8, .8), 0 0 14px 3px var(--tc, #ffb02e); animation: flareGlow 1.6s ease-in-out infinite; }
.mk-ev.mk-ping_sos { background: #ff2d2d; color: #fff; box-shadow: 0 0 0 2px rgba(10, 9, 8, .8), 0 0 16px 4px rgba(255, 45, 45, .8); animation: evPulse .8s ease-in-out infinite; }
@keyframes flareGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.mk-ev.mk-territory { background: var(--tc, #6b6660); color: #0a0908; clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); }
#mk-tip .mt-sep { margin-top: calc(1 * var(--kh)); padding-top: calc(.8 * var(--kh)); border-top: 1px solid var(--a-line); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .2em; text-transform: uppercase; color: var(--a-mute); }
#mk-tip .mt-sep { margin-top: calc(1 * var(--kh)); padding-top: calc(.8 * var(--kh)); border-top: 1px solid var(--a-line); font-family: var(--a-mono); font-size: calc(1.12 * var(--kh)); letter-spacing: .2em; text-transform: uppercase; color: var(--a-mute); }