/* =====================================================================
   THE FIELD KIT MAP ON THE SITE (src/map.html). Hand-written: everything else in kit/ is copied from the game by
   kit_sync.py and must not be edited here.
   - The kit is drawn inside the page's map box as if the box were the screen: #field is a size container and the
     copied CSS's vh/vw read --kh/--kw (1% of the box, with a floor so text stays legible on a short box).
   - The game's design tokens (apoc_assets/ui/apoc-ui.css) and the base rules the kit leans on (apoc_menu style.css),
     scoped to #menu so the site's own styles never leak in or out.
   - The site's parts of the kit: no rail (the kit's sections are game pages), the weather dock moves to the left edge,
     a detail card like the weather card, and a narrow-screen layout.
   ===================================================================== */
#menu {
    --a-ink: #0a0908; --a-bg: #0c0b0a; --a-panel: #121110; --a-panel-2: #181614;
    --a-white: #f3eee6; --a-dim: rgba(243, 238, 230, .62); --a-mute: rgba(243, 238, 230, .38); --a-faint: rgba(243, 238, 230, .14); --a-line: rgba(243, 238, 230, .08);
    --a-ember: #ff8a3c; --a-amber: #f0b44a; --a-blood: #d2382c; --a-toxic: #9bd13b; --a-oxy: #5cc8e2; --a-steel: #9aa6b2;
    --a-head: 'Barlow Condensed', 'Arial Narrow', sans-serif; --a-body: 'Barlow', 'Segoe UI', sans-serif; --a-mono: 'JetBrains Mono', ui-monospace, monospace;
    --a-shadow: 0 .15vh .6vh rgba(0, 0, 0, .9); --a-ease: cubic-bezier(.2, .8, .2, 1); --a-snap: cubic-bezier(.4, 1.4, .5, 1);
    position: relative; height: 100%; color: var(--a-white); font-family: var(--a-body); font-size: 16px; line-height: normal; text-align: left;
    user-select: none; -webkit-user-select: none;
}
#menu *, #menu *::before, #menu *::after { box-sizing: border-box; }
:where(#menu) :where(h1, h2, h3, p, ul, ol, dl, dd, table) { margin: 0; padding: 0; }
:where(#menu) button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; margin: 0; text-transform: inherit; letter-spacing: inherit; }
:where(#menu) button:focus-visible { outline: 2px solid var(--a-amber); outline-offset: 1px; }
#menu .hidden { display: none !important; }
#field { container-type: size; --kh: max(1cqh, 7.6px); --kw: 1cqw; animation: none; }
#field .a-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.15em; }
#field .leaflet-container:not(#mars) { background: #07090a; }
#field .leaflet-container { font-family: var(--a-body); }
#field .leaflet-control-container { display: none; }
#field .leaflet-container:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--a-amber); }
#field .map-tools { display: flex; gap: calc(.5 * var(--kh)); }
#field .map-tools button { color: var(--a-white); }
#field .mk-label .lbl { position: absolute; left: 0; top: 0; transform: translateX(-50%); font-family: var(--a-head); font-weight: 700; font-size: calc(1.3 * var(--kh));
    letter-spacing: .22em; text-transform: uppercase; color: var(--a-white); white-space: nowrap; padding: calc(.25 * var(--kh)) calc(.6 * var(--kw)); background: rgba(8, 7, 6, .8);
    box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .12); }
#field .mk-label .lbl.dev { color: var(--dev); }
@keyframes evPulse { 50% { filter: brightness(1.6); } }
/* Off screen (scrolled away): weather.js and marks.js idle as they do under a sheet, without the sheet's dimming. */
#field.sheet-on.kit-off .pmap { filter: none; transition: none; }

/* ---------------------------------------------------------------- the site's frame */
.kitbox { position: relative; height: clamp(560px, calc(100svh - 96px), 1180px); border-block: 1px solid rgba(127, 214, 194, .16); background: #07090a; }
#pda-top { padding-left: calc(2.6 * var(--kw)); }
.pt-who b { font-size: calc(2.2 * var(--kh)); }
.pt-tier.live { color: var(--dev); }
.pt-tier.off { color: var(--a-mute); }
.pt-tier.moon { color: #ff6b5b; background: rgba(210, 56, 44, .14); }
.pt-read b.wx { font-size: calc(2.3 * var(--kh)); }
/* No rail on the site: the weather dock sits at the map's left edge. */
#wx-dock { left: calc(2 * var(--kw)); }
#intel .facs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.55 * var(--kh)) calc(.8 * var(--kw)); }
#intel .facs span { display: flex; align-items: flex-start; gap: calc(.7 * var(--kh)); min-width: 0; font: 600 calc(1.3 * var(--kh))/1.15 var(--a-head); letter-spacing: .08em; text-transform: uppercase; color: var(--a-white); }
#intel .facs span b { font-weight: 600; overflow-wrap: break-word; min-width: 0; }
#intel .facs i { flex: none; margin-top: calc(.05 * var(--kh)); width: calc(1.1 * var(--kh)); height: calc(1.1 * var(--kh)); border-radius: 50%; border: 1.5px dashed var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
#intel .facs span.rumor { color: #ff8a7a; }
#intel .facs-n { margin-top: calc(1 * var(--kh)); font: 500 calc(1.05 * var(--kh))/1.5 var(--a-mono); color: var(--a-mute); }
.ly-units { grid-column: 1 / -1; display: flex; gap: calc(.3 * var(--kh)); padding: calc(.3 * var(--kh)); margin-top: calc(.4 * var(--kh)); background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px var(--dev-line); }
.ly-units button { flex: 1; padding: calc(.5 * var(--kh)) 0; font: 600 calc(1.12 * var(--kh)) var(--a-head); letter-spacing: .14em; text-transform: uppercase; color: var(--a-dim); }
.ly-units button.on { color: var(--a-ink); background: var(--dev); }
.sig .d { max-width: calc(8 * var(--kw)); overflow: hidden; text-overflow: ellipsis; }
.sig-line { padding: calc(.8 * var(--kh)) calc(.4 * var(--kw)); border-bottom: 1px solid var(--a-line); font-size: calc(1.35 * var(--kh)); line-height: 1.45; color: var(--a-dim); }
.sig-line b { display: block; font: 600 calc(1.05 * var(--kh)) var(--a-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a-amber); }
.sig-line b.red { color: #ff8a7a; }
.sig-line small { float: right; font: 500 calc(1.05 * var(--kh)) var(--a-mono); color: var(--a-mute); }
.pf-cayo { display: flex !important; width: auto !important; gap: calc(.6 * var(--kh)); padding: 0 calc(1.2 * var(--kh)); font: 700 calc(1.2 * var(--kh)) var(--a-head) !important; letter-spacing: .24em;
    text-transform: uppercase; color: #ff8a7a !important; box-shadow: inset 0 0 0 1px rgba(255, 107, 91, .45) !important; }
.pf-cayo:hover { color: var(--a-ink) !important; background: #ff8a7a !important; }
.pf-cayo .a-ico { transform: rotate(135deg); }
.pf-intel { display: none !important; }

/* ---------------------------------------------------------------- the detail card (a mark, a faction's ground, the rumor) */
#web-card { position: absolute; z-index: 612; top: calc(14 * var(--kh)); right: calc(2 * var(--kw)); width: calc(21 * var(--kw)); max-height: calc(76 * var(--kh)); overflow-y: auto;
    padding: calc(1.6 * var(--kh)) calc(1.1 * var(--kw)) calc(1.5 * var(--kh)); background: linear-gradient(180deg, #0a0b0b, #070808);
    box-shadow: inset 0 0 0 1px var(--dev-line), inset 0 2px 0 var(--tc, var(--dev)), 0 2vh 5vh rgba(0, 0, 0, .6); user-select: text; -webkit-user-select: text; }
#web-card .wc-x { position: absolute; right: calc(.9 * var(--kh)); top: calc(.7 * var(--kh)); width: calc(2.8 * var(--kh)); height: calc(2.8 * var(--kh)); font-size: calc(2.1 * var(--kh)); line-height: 1; color: var(--a-mute); }
#web-card .wc-x:hover { color: var(--a-white); }
#web-card .wc-k { padding-right: calc(3 * var(--kh)); font: 500 calc(1.05 * var(--kh))/1.4 var(--a-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tc, var(--dev)); }
#web-card h3 { margin: calc(.5 * var(--kh)) 0 calc(.9 * var(--kh)); font: 700 calc(2.5 * var(--kh))/1.05 var(--a-head); letter-spacing: .08em; text-transform: uppercase; color: var(--a-white); }
#web-card p { font: 500 calc(1.4 * var(--kh))/1.5 var(--a-body); color: var(--a-dim); }
#web-card dl { display: grid; grid-template-columns: auto 1fr; gap: calc(.6 * var(--kh)) calc(1.2 * var(--kh)); margin-top: calc(1.2 * var(--kh)); padding-top: calc(1 * var(--kh)); border-top: 1px solid var(--a-line); }
#web-card dt { font: 500 calc(1.02 * var(--kh))/1.6 var(--a-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a-mute); }
#web-card dd { font: 600 calc(1.4 * var(--kh))/1.35 var(--a-head); letter-spacing: .04em; color: var(--a-white); }
#web-card .wc-xy { display: block; margin-top: calc(1.1 * var(--kh)); font: 500 calc(1.02 * var(--kh)) var(--a-mono); color: var(--a-mute); }

/* ---------------------------------------------------------------- narrow screens: the map first, the column on demand */
@media (max-width: 820px) {
    .kitbox { height: clamp(520px, calc(100svh - 70px), 900px); }
    #field { --kh: max(1cqh, 8.6px); }
    #pda-top { grid-template-columns: 1fr auto; padding: 14px 14px 26px; }
    .pt-id, .pt-read { display: none; }
    .pt-zone { grid-column: 1 / -1; }
    .pt-zone h1 { font-size: calc(2.8 * var(--kh)); letter-spacing: .14em; }
    #intel { display: none; left: 12px; right: 12px; width: auto; top: calc(12 * var(--kh)); bottom: calc(9.5 * var(--kh)); }
    #field.intel-open #intel { display: flex; overflow-y: auto; }
    #intel .in-card { flex: none; }
    #intel #f-near { max-height: 36vh; }
    .pf-hints, .pf-coords { display: none !important; }
    #pda-foot { grid-template-columns: 1fr; padding: 0 12px; }
    #pda-foot .map-tools { justify-self: stretch; justify-content: flex-end; flex-wrap: wrap; }
    .pf-intel { display: flex !important; width: auto !important; padding: 0 calc(1.2 * var(--kh)); align-items: center; gap: calc(.6 * var(--kh)); font: 700 calc(1.2 * var(--kh)) var(--a-head) !important; letter-spacing: .2em; text-transform: uppercase; }
    .pf-cayo span { display: none; }
    #wx-dock { left: 12px; width: min(calc(27 * var(--kh)), calc(100% - 24px)); }
    #web-card, #wx-card { left: 12px; right: 12px; width: auto !important; top: calc(12 * var(--kh)); max-height: calc(100% - 22 * var(--kh)); }
    #field.intel-open #wx-dock { display: none; }
}