/* TRGM-410/411: the map generator and download pages, on top of the site's /style.css (same fonts, colours, nav). */
[hidden]{display:none!important}
.tool-page .nav{position:relative;background:var(--ink)}
.tool-page .nav nav a.on{color:var(--acid)}
.tool-wrap{padding:56px 4.5vw 90px;max-width:1500px;margin:0 auto}
.tool-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:34px}
.tool-head h1{font-size:clamp(48px,6vw,92px);line-height:.9;letter-spacing:-.035em;font-weight:500;margin:18px 0 0;text-transform:uppercase}
.tool-head p{font:14px/1.65 Arial,sans-serif;color:var(--muted);max-width:520px;margin:0}
.panel{border:1px solid var(--line);background:#0c0e0c;padding:24px}
.panel h2{font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acid);margin:0 0 18px;font-weight:400}
.field-label{display:block;font:9px var(--mono);letter-spacing:.14em;color:#7c8178;text-transform:uppercase;margin-bottom:9px}
.text-in{width:100%;background:#080a08;border:1px solid #363b35;color:var(--bone);padding:15px 16px;font:18px var(--mono);letter-spacing:.06em;outline:0}
.text-in:focus{border-color:var(--acid)}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{border:1px solid rgba(255,255,255,.27);background:transparent;color:var(--bone);padding:13px 17px;font:11px var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.btn:hover{border-color:var(--acid)}
.btn.primary{background:var(--acid);border-color:var(--acid);color:#11150c}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:default}
.btn.small{padding:8px 11px;font-size:10px}
.note{font:12px/1.6 Arial,sans-serif;color:#81867e;margin:12px 0 0}
.error{color:#ff8a65}
.ok{color:var(--acid)}

/* map generator */
.map-layout{display:grid;grid-template-columns:380px 1fr;gap:22px;align-items:start}
.map-layout>*,.map-side,.panel,.tool-head>*{min-width:0}
.code-box b{min-width:0}
.map-side{display:flex;flex-direction:column;gap:22px}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed #3c4339;padding:14px 16px;margin-top:16px;background:#090b09}
.code-box b{font:500 20px var(--mono);letter-spacing:.06em;word-break:break-all;color:var(--acid)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#20241f;border:1px solid #20241f;margin-top:16px}
.picks div{background:#0b0d0b;padding:9px 11px}
.picks span{display:block;font:8px var(--mono);letter-spacing:.12em;color:#666b64;text-transform:uppercase}
.picks b{font:12px var(--mono);font-weight:400}
.picks .mapkey b{color:var(--bone)}
.picks .notmap b{color:#8d9289}
.toggle-custom{margin-top:16px;width:100%;justify-content:space-between}
.custom{display:none;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.custom.open{display:block}
.custom h3{font:9px var(--mono);letter-spacing:.16em;color:#7c8178;margin:14px 0 8px;text-transform:uppercase;font-weight:400}
.opt{margin-bottom:10px}
.opt>span{display:block;font:10px var(--mono);color:#b9bdb5;margin-bottom:5px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{border:1px solid #333832;background:#090b09;color:#a7aba3;padding:6px 8px;font:10px var(--mono);cursor:pointer}
.chip:hover{border-color:#5d6659}
.chip.on{border-color:var(--acid);color:var(--acid)}
.chip.rnd.on{border-color:var(--ice);color:var(--ice)}
.status-line{display:flex;align-items:center;gap:12px;font:11px var(--mono);color:#b9bdb5;margin-top:14px;min-height:20px}
.spinner{width:14px;height:14px;border:2px solid #333;border-top-color:var(--acid);border-radius:50%;animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-bottom:0;background:#0c0e0c;padding:8px 10px}
.viewer-bar .chips,.viewer-bar .zooms{display:flex;gap:6px;flex-wrap:wrap}
.viewer{position:relative;border:1px solid var(--line);background:#1f4169;height:min(78vh,900px);overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.viewer.dragging{cursor:grabbing}
.viewer .stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.viewer .stage img{display:block;width:100%;height:100%;pointer-events:none}
.viewer .stage img.crisp{image-rendering:pixelated}
.viewer .stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.viewer .empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#c9d7e2;font:13px/1.7 var(--mono);background:radial-gradient(ellipse at center,#1d3b5f,#0b1622);padding:30px}
.viewer .empty b{display:block;font:500 34px var(--display);letter-spacing:.02em;color:var(--bone);margin-bottom:8px}
.viewer-bar .btn{padding:7px 11px}
.readout{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(9,11,10,.82);border:1px solid #2c312a;padding:8px 10px;font:10px var(--mono);color:#cfd3cb;min-width:180px}
.scalebar{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(9,11,10,.82);border:1px solid #2c312a;padding:8px 10px 6px;font:10px var(--mono);color:#cfd3cb}
.scalebar .bar{height:6px;border:1px solid #cfd3cb;border-top:0;margin-bottom:4px;background:repeating-linear-gradient(90deg,#cfd3cb 0 50%,transparent 50% 100%);background-size:50% 100%}
.map-info{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#20241f;border:1px solid #20241f;margin-top:14px}
.map-info div{background:#0b0d0b;padding:12px 14px}
.map-info span{display:block;font:8px var(--mono);letter-spacing:.12em;color:#666b64;text-transform:uppercase;margin-bottom:6px}
.map-info b{font:15px var(--mono);font-weight:400}
.map-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.recent{margin-top:46px}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.recent-grid a{border:1px solid var(--line);background:#0c0e0c;display:block}
.recent-grid a:hover{border-color:var(--acid)}
.recent-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;image-rendering:pixelated;background:#1f416a}
.recent-grid span{display:block;padding:9px 10px;font:10px var(--mono);color:#b9bdb5;word-break:break-all}
.recent-grid small{display:block;color:#6d726a;margin-top:3px;font-size:9px}

/* downloads */
.dl-gate{max-width:560px}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.dl-card{border:1px solid var(--line);background:#0c0e0c;padding:28px;display:flex;flex-direction:column;min-height:300px}
.dl-card .plat{font:9px var(--mono);letter-spacing:.16em;color:var(--acid);text-transform:uppercase}
.dl-card h3{font-size:40px;font-weight:500;margin:22px 0 10px;line-height:1}
.dl-card p{font:13px/1.6 Arial,sans-serif;color:#8f948b}
.dl-card .meta{font:10px var(--mono);color:#7c8178;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);margin-bottom:14px}
.dl-card.off{opacity:.55}
.steps{margin-top:34px}
.steps ol{font:14px/1.8 Arial,sans-serif;color:#a1a59d;padding-left:20px}
.steps code{font:12px var(--mono);color:var(--bone);background:#151915;padding:2px 6px}

@media(max-width:1000px){.map-layout{grid-template-columns:1fr}.dl-grid{grid-template-columns:1fr}.map-info{grid-template-columns:1fr 1fr}.tool-head{display:block}.tool-head p{margin-top:18px}}
@media(max-width:560px){.tool-wrap{padding:36px 16px 70px}.viewer{height:64vh}.picks{grid-template-columns:1fr}}