:root {
  color-scheme: dark;
  --bg: #0b111b;
  --panel: #121d2b;
  --panel2: #192638;
  --line: #2b3a4d;
  --muted: #a1b2c5;
  --text: #edf3fa;
  --accent: #77e1cf;
  --orange: #ffaf91;
  --gold: #efd394;
  --radius: 18px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button, a { touch-action: manipulation; }
button { color: inherit; background: transparent; border: 0; }
button:disabled { opacity: .4; cursor: not-allowed; }
a { color: var(--accent); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input, select, textarea { width: 100%; min-width: 0; min-height: 46px; background: #0d1724; border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 11px 12px; }
input[type=checkbox] { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
textarea { resize: vertical; min-height: 100px; }
label { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-bottom: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(25px, 2.2vw, 34px); letter-spacing: -1px; font-weight: 650; margin-bottom: 8px; }
h2 { font-size: 22px; letter-spacing: -.5px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { line-height: 1.65; color: var(--muted); }
small { color: var(--muted); }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hidden { display: none !important; }
.shell { display: flex; min-height: 100dvh; }
.rail { width: 86px; border-right: 1px solid var(--line); display: flex; align-items: center; flex-direction: column; position: fixed; inset: 0 auto 0 0; background: #0f1926; z-index: 10; }
.brand-mark { width: 43px; height: 43px; border-radius: 13px; background: var(--accent); color: #112d2b; text-decoration: none; margin: 23px 0 36px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; letter-spacing: -3px; }
.brand-mark span { font-size: 16px; align-self: flex-start; margin-top: 7px; }
.rail nav { display: grid; gap: 13px; }
.nav-item { width: 66px; min-height: 64px; display: grid; place-content: center; gap: 7px; color: var(--muted); font-size: 10px; border-radius: 12px; }
.nav-item.active { background: #1b3a3d; color: var(--accent); }
.nav-item svg { margin: auto; }
.rail-foot { margin: auto 0 24px; text-align: center; font-size: 11px; line-height: 1.8; color: var(--muted); letter-spacing: 2px; }
.workspace { width: calc(100% - 86px); margin-left: 86px; min-width: 0; }
.header { height: 76px; border-bottom: 1px solid #223044; display: flex; justify-content: space-between; align-items: center; padding: 0 32px; }
.brand { display: flex; align-items: center; gap: 15px; }
.brand strong { font-size: 18px; letter-spacing: 2px; }
.brand strong span { margin-left: 12px; color: #63778d; font-weight: 300; }
.brand-sub { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.header-actions { display: flex; gap: 20px; align-items: center; }
.local-badge { font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.local-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; }
.icon-button { height: 44px; width: 44px; border: 1px solid var(--line); border-radius: 10px; display: inline-grid; place-items: center; flex-shrink: 0; }
.button { border: 1px solid var(--line); padding: 11px 16px; min-height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.button.primary { background: var(--accent); border-color: var(--accent); color: #102c2a; }
.button.subtle { border-color: transparent; color: var(--muted); }
.button.danger { color: var(--orange); }
.button.wide { width: 100%; }
@media(hover:hover) { button:hover, summary:hover { color: var(--text); } .icon-button:hover, .button:hover { background: #26394b; } .button.primary:hover { background: #9aefdf; color: #102c2a; } .nav-item:hover { background: #1c2b3d; } }
.page { padding: 28px 32px 32px; max-width: 1800px; margin: auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-heading > div:first-child { min-width: 0; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 1.7px; color: var(--accent); margin-bottom: 8px; display: block; }
.heading-title h1 { margin: 0; overflow-wrap: anywhere; }
.heading-sub { font-size: 12px; color: var(--muted); margin-top: 9px; display: flex; gap: 9px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.workflow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 13px; margin-bottom: 22px; background: #101b28; }
.workflow button { display: flex; gap: 12px; align-items: center; text-align: left; min-width: 0; padding: 14px 18px; min-height: 72px; }
.workflow button + button { border-left: 1px solid var(--line); }
.workflow button > span:nth-child(2) { min-width: 0; }
.workflow small, .workflow strong { display: block; }
.workflow small { font-size: 11px; margin-bottom: 4px; }
.workflow strong { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.workflow .icon { margin-left: auto; color: var(--accent); width: 16px; }
.step-number { color: #6c829b; font: 11px ui-monospace,monospace; }
.planner { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 22px; align-items: start; }
.map-column, .setup-column { min-width: 0; }
.map-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); position: relative; box-shadow: 0 10px 35px #0002; }
.map-top { min-height: 73px; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.map-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.map-name > .icon { color: var(--accent); }
.map-name strong { display: block; font-size: 16px; font-weight: 600; }
.map-name small { display: block; font-size: 11px; margin-top: 4px; }
.map-top-actions { display: flex; gap: 9px; align-items: center; }
.expand-map { font-size: 24px; }
.segmented { display: flex; background: #0c1622; border: 1px solid var(--line); padding: 3px; border-radius: 10px; gap: 3px; }
.segmented button { font-size: 12px; min-width: 42px; min-height: 37px; padding: 5px 10px; border-radius: 7px; color: var(--muted); }
.segmented button.active { background: #254a4b; color: #a4f5e9; }
.zone-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #142833; border-bottom: 1px solid #2c4550; }
.zone-bar > label { display: flex; align-items: center; gap: 7px; white-space: nowrap; margin: 0; color: #bfe9e7; font-size: 12px; }
.zone-bar > label .icon { width: 17px; }
.zone-bar select { flex: 1; background: #0e202c; border-color: #345563; min-height: 44px; font-size: 13px; }
.zone-bar .button { padding: 8px 10px; border-color: #345563; color: var(--accent); }
.map-options { display: flex; align-items: center; gap: 8px; padding: 4px 14px; min-height: 50px; border-bottom: 1px solid var(--line); }
.map-options > button { padding: 10px; min-height: 44px; font-size: 12px; color: var(--muted); }
.layer-panel { position: relative; }
.layer-panel summary { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 12px; padding: 6px; list-style: none; color: #c9d5e3; }
.layer-panel summary::-webkit-details-marker { display: none; }
.layer-panel summary .icon { width: 16px; }
.layer-options { position: absolute; z-index: 5; top: 46px; left: 0; width: min(285px,76vw); border: 1px solid #496079; border-radius: 13px; padding: 12px 16px; background: #142334fa; box-shadow: 0 15px 40px #0008; }
.layer-options label { display: flex; gap: 10px; align-items: center; margin: 0; min-height: 42px; font-size: 13px; color: var(--text); }
.layer-options p { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.find-landmark { margin: 0 0 0 auto; max-width: 155px; }
.find-landmark select { font-size: 12px; border-color: transparent; background: transparent; min-height: 44px; padding: 8px; }
.scene-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px 15px; background: #142131; border-bottom: 1px solid var(--line); }
.scene-controls label { display: flex; align-items: center; gap: 7px; margin: 0; min-height: 44px; font-size: 12px; }
.scene-controls select { width: auto; padding: 6px; font-size: 12px; min-height: 36px; }
.scene-controls button { padding: 6px; color: var(--accent); font-size: 12px; min-height: 44px; margin-left: auto; }
.map-viewport { height: clamp(380px,53dvh,700px); position: relative; overflow: hidden; isolation: isolate; background: #19221f; }
.map-viewport canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.map-tools { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; padding: 9px 12px; border-top: 1px solid var(--line); background: #101e2d; }
.tool { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); border-radius: 9px; }
.tool.active { background: #255053; color: #b1f5e8; }
.tool span { font-size: 12px; font-weight: 550; }
.map-zoom { position: absolute; right: 16px; top: 50%; display: grid; gap: 8px; }
.map-zoom button { background: #111f2ee8; border: 1px solid #8192a377; width: 44px; height: 44px; border-radius: 10px; font-size: 24px; box-shadow: 0 2px 8px #0005; }
.compass { position: absolute; right: 22px; top: 17px; text-align: center; color: #eff5f3; font: 10px ui-monospace,monospace; text-shadow: 0 1px 5px #000; }
.compass b { display: block; font-size: 27px; font-weight: 400; margin-top: 3px; }
.map-caption { padding: 4px 16px 12px; font-size: 11px; line-height: 1.5; color: #bdcddd; background: #101e2d; }
.map-footer { padding: 12px 16px; font-size: 10px; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.legend { display: flex; gap: 15px; }
.legend span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #b4e29b; margin-right: 6px; }
.legend span:nth-child(2)::before { background: var(--gold); }
.legend span:nth-child(3)::before { background: var(--orange); }
.legend span:nth-child(4)::before { background: none; width: 8px; height: 8px; border: 1px solid var(--accent); }
.scene-status { padding: 8px 16px 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.solution { margin-top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.section-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.section-line h3 { margin: 0; display: flex; align-items: center; gap: 9px; }
.status { font-size: 10px; letter-spacing: .3px; color: #a1ecdb; background: #163c38; border: 1px solid #3c655f; border-radius: 6px; padding: 6px 8px; white-space: nowrap; }
.status.warn { color: #f0c697; background: #322b23; border-color: #65503a; }
.metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.metric { border-right: 1px solid var(--line); }
.metric:last-child { border: 0; }
.metric label { font-size: 11px; margin: 0 0 8px; }
.metric strong { font-size: clamp(30px,3vw,42px); font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -1.5px; }
.metric strong.accent { color: var(--accent); }
.metric em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 6px; }
.solution-note { font-size: 11px; color: var(--muted); margin-top: 16px; line-height: 1.6; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.solution-note button { min-width: 44px; min-height: 44px; border-radius: 9px; border: 1px solid var(--line); }
.bottom-note { font-size: 10px; color: #8da0b5; margin: 16px 2px; display: flex; justify-content: space-between; gap: 10px; }
.editor { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.editor-heading { display: flex; justify-content: space-between; align-items: center; padding: 21px 20px 17px; gap: 6px; }
.editor-heading h2 { font-size: 18px; margin: 0; }
.editor-heading .eyebrow { font-size: 9px; }
.editor-heading .button { padding: 7px; }
.editor-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); padding: 0 10px; gap: 7px; }
.editor-tabs button { min-height: 48px; padding: 12px 4px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.editor-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
#target-count { font-size: 10px; padding: 2px 5px; background: #29384a; border-radius: 5px; margin-left: 3px; }
.editor-body { padding: 20px; }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.point-card { padding: 18px 0; border-top: 1px solid var(--line); }
.point-title { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 10px; }
.point-title strong { font-size: 12px; font-weight: 600; display: flex; gap: 7px; align-items: center; }
.dot { width: 7px; height: 7px; background: #b4e29b; border-radius: 50%; flex-shrink: 0; }
.point-title.target .dot { background: var(--orange); }
.point-title.fob .dot { background: var(--gold); }
.point-title button { font-size: 11px; color: var(--accent); min-height: 44px; padding: 7px 0 7px 7px; }
.xy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.xy label { position: relative; margin: 0; }
.xy span { position: absolute; left: 12px; top: 16px; font: 12px ui-monospace,monospace; color: var(--muted); }
.xy input { padding-left: 32px; font: 16px ui-monospace,monospace; height: 48px; -moz-appearance: textfield; }
.xy input::-webkit-inner-spin-button { display: none; }
.height-details { margin-top: 12px; border: 1px solid #2a3c50; border-radius: 9px; padding: 0 10px; }
.height-details summary { padding: 12px 0; font-size: 11px; color: #b8cadb; min-height: 42px; }
.height-details summary span { float: right; color: #e1eaf4; font-variant-numeric: tabular-nums; }
.height-details[open] { padding-bottom: 9px; }
.height-fields { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin-top: 5px; }
.height-fields label { font-size: 11px; display: grid; gap: 5px; }
.height-fields input, .height-fields select { padding: 8px; font-size: 12px; }
.height-readout { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; font-size: 10px; color: var(--muted); }
.height-readout span { display: grid; gap: 5px; flex: 1; }
.height-readout b { color: #dce7f1; font-size: 12px; font-weight: 550; white-space: nowrap; }
.height-actions { display: flex; justify-content: space-between; gap: 6px; }
.height-actions button { font-size: 11px; color: var(--accent); padding: 5px 0; min-height: 44px; }
.elevation-comparison { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.elevation-comparison .height-readout b { font-size: 19px; }
.elevation-comparison .subtext { margin: 12px 0 0; }
.subtext { font-size: 11px; line-height: 1.6; color: var(--muted); }
.target-name { font-size: 12px; color: var(--orange); margin-bottom: 12px; overflow-wrap: anywhere; }
.voice-card { display: flex; align-items: center; gap: 12px; border: 1px solid #35585b; border-radius: 14px; padding: 16px; background: linear-gradient(110deg,#173238,#152532); margin-top: 16px; width: 100%; text-align: left; }
.mic-circle { background: var(--accent); color: #133130; border-radius: 12px; width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; }
.voice-card strong { display: block; font-weight: 550; font-size: 12px; margin-bottom: 6px; }
.voice-card small { font-size: 11px; }
.voice-card .key { margin-left: auto; border: 1px solid #5d7780; border-radius: 4px; padding: 3px 6px; color: #b4cbd0; font-size: 10px; }
.target-list { display: grid; gap: 12px; }
.target-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #101a28; }
.target-row.selected { border-color: #b1846c; background: #29282b; }
.target-row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.target-select { text-align: left; flex: 1; min-width: 0; min-height: 48px; }
.target-select strong { font-size: 13px; display: block; overflow-wrap: anywhere; }
.target-select small { display: block; font: 11px ui-monospace,monospace; margin-top: 7px; }
.row-actions { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 7px; margin-top: 8px; }
.row-actions button { font-size: 11px; min-height: 44px; color: #b4c5d8; padding: 4px 8px; }
.row-actions button:last-child { margin-left: auto; }
.chip { font-size: 9px; letter-spacing: .7px; padding: 6px 8px; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; white-space: nowrap; }
.empty { padding: 40px 20px; text-align: center; border: 1px dashed #44566c; border-radius: 14px; }
.empty .icon { width: 35px; height: 35px; color: var(--accent); margin-bottom: 15px; }
.empty p { font-size: 13px; margin-bottom: 20px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)); gap: 20px; }
.library-card, .settings-card { border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 22px; min-width: 0; }
.library-card h3 { margin: 16px 0 8px; font-size: 20px; overflow-wrap: anywhere; }
.library-card p { font-size: 12px; min-height: 36px; }
.card-meta { font-size: 11px; color: var(--muted); line-height: 1.9; margin-bottom: 16px; overflow-wrap: anywhere; }
.card-preview { height: 95px; background: repeating-linear-gradient(0deg,transparent 0 23px,#8bb1ae16 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,#8bb1ae16 23px 24px),radial-gradient(ellipse at 25% 80%,#34535b,#142232); border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 50px; color: var(--accent); }
.card-preview .icon { width: 26px; height: 26px; }
.map-card-list .card-preview { height: 150px; }
.map-preview { position: relative; overflow: hidden; }
.map-preview img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.map-preview .chip { position: absolute; right: 10px; bottom: 10px; background: #101c2aee; color: var(--text); }
.filter-row { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.filter-row input { max-width: 350px; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.settings-card p { font-size: 13px; }
.settings-card h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.settings-card ul { padding-left: 20px; color: var(--muted); line-height: 2; font-size: 12px; }
.settings-card code { color: var(--accent); font-size: 12px; overflow-wrap: anywhere; }
.settings-card .field { margin-top: 20px; }
.divider { height: 1px; background: var(--line); margin: 20px 0; }
.full-span { grid-column: 1/-1; }
.badge-row { display: flex; gap: 6px; align-items: center; }
.key-value { display: flex; justify-content: space-between; padding: 11px 0; font-size: 12px; line-height: 1.5; border-bottom: 1px solid var(--line); gap: 12px; }
.key-value span:first-child { color: var(--muted); }
.danger-text { color: var(--orange); }
.outline-tag { font-size: 10px; color: var(--accent); border: 1px solid #365956; border-radius: 6px; padding: 5px 8px; }
.spacer { height: 12px; }
.mobile-nav { display: none; }
dialog { width: min(560px,calc(100% - 28px)); border: 1px solid #4b6279; border-radius: 20px; background: #142131; color: var(--text); padding: 26px; box-shadow: 0 30px 100px #0009; max-height: 90dvh; }
dialog::backdrop { background: #030b15bb; backdrop-filter: blur(7px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dialog-head h2 { margin: 0; }
.dialog-head button { width: 44px; height: 44px; flex-shrink: 0; font-size: 24px; color: var(--muted); }
.dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dialog-description { font-size: 13px; }
.voice-stage { text-align: center; padding: 18px 0; }
.voice-orb { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: #244a4b; border: 1px solid #588e8d; color: var(--accent); margin: 0 auto 18px; }
.voice-orb .icon { width: 30px; height: 30px; }
.voice-orb.listening { animation: pulse 1.2s infinite; }
.voice-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.voice-examples button { font-size: 12px; border: 1px solid var(--line); background: #1d3142; padding: 10px; min-height: 44px; border-radius: 8px; }
.command-result { background: #0a1726; border: 1px solid var(--line); padding: 15px; border-radius: 10px; margin-top: 14px; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.form-error { color: #ffb79d; font-size: 13px; margin-top: 12px; line-height: 1.6; }
.notice { background: #302a23; border: 1px solid #6c573c; padding: 14px; border-radius: 10px; font-size: 12px; line-height: 1.65; color: #e3cda8; margin-bottom: 20px; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%,20px); background: var(--accent); color: #122e2b; padding: 14px 20px; border-radius: 12px; box-shadow: 0 10px 30px #0005; font-size: 13px; z-index: 1000; opacity: 0; pointer-events: none; transition: .2s; max-width: 90vw; line-height: 1.5; }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
.zone-editor { margin: 22px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.zone-edit-row { padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; background: #0f1c2a; }
.zone-edit-row input { margin-top: 5px; }
.zone-numbers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.zone-row-footer { display: flex; justify-content: space-between; align-items: center; }
.zone-row-footer label { display: flex; align-items: center; gap: 8px; margin: 0; }
.zone-row-footer input { margin: 0; }
.zone-row-footer button { min-height: 44px; color: var(--orange); font-size: 12px; }
body.map-expanded { overflow: hidden; }
.map-expanded .map-card { position: fixed; inset: 12px; z-index: 50; display: flex; flex-direction: column; border-radius: 16px; }
.map-expanded .map-viewport { height: auto; min-height: 80px; flex: 1; }
.map-expanded .map-top, .map-expanded .zone-bar, .map-expanded .map-options, .map-expanded .scene-controls, .map-expanded .map-tools, .map-expanded .map-caption, .map-expanded .map-footer, .map-expanded .scene-status { flex-shrink: 0; }
.map-expanded .map-footer, .map-expanded .scene-status { display: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 13px #77e1cf15; } }
@media(min-width:1600px) { .planner { grid-template-columns: minmax(0,1fr) 390px; gap: 26px; } .editor-body { padding: 24px; } }
@media(max-width:1150px) { .page { padding: 24px; } .header { padding: 0 24px; } .planner { grid-template-columns: minmax(0,1fr) 310px; gap: 16px; } .zone-bar { gap: 7px; padding: 10px; } .zone-bar > label { font-size: 11px; } .zone-bar > label .icon { display: none; } .zone-bar .button span { display: none; } .editor-body { padding: 16px; } .brand-sub { display: none; } }
@media(max-width:960px) { .rail { width: 72px; } .workspace { width: calc(100% - 72px); margin-left: 72px; } .planner { grid-template-columns: 1fr; } .setup-column { scroll-margin-top: 18px; } .editor-body:has(.point-card) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; } .editor-body > .point-card { grid-column: 1/-1; } .map-viewport { height: 56dvh; } .page { max-width: 950px; } }
@media(max-width:700px) {
  .rail { display: none; }
  .workspace { width: 100%; margin-left: 0; }
  .header { height: 61px; padding: 0 16px; }
  .brand strong { font-size: 17px; }
  .brand strong span { display: none; }
  .brand-sub { display: block; font-size: 8px; letter-spacing: 1.2px; }
  .brand { gap: 10px; }
  .local-badge { display: none; }
  .header .icon-button { width: 40px; height: 40px; }
  .page { padding: 22px 14px calc(110px + env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 18px; }
  .page-heading > .actions { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-heading .actions .button { min-height: 44px; }
  .heading-title h1 { font-size: 27px; }
  .heading-sub { font-size: 11px; }
  .workflow { margin-bottom: 16px; }
  .workflow button { padding: 12px 10px; gap: 7px; min-height: 69px; }
  .workflow .step-number { display: none; }
  .workflow .icon { width: 13px; }
  .workflow small { font-size: 10px; }
  .workflow strong { font-size: 11px; }
  .planner { gap: 17px; }
  .map-top { min-height: 70px; padding: 11px 13px; }
  .map-name { gap: 8px; }
  .map-name > .icon { display: none; }
  .map-name strong { font-size: 16px; }
  .map-name small { font-size: 10px; }
  .map-top-actions { gap: 6px; }
  .segmented button { min-height: 38px; min-width: 37px; }
  .zone-bar { flex-wrap: wrap; padding: 11px 12px; gap: 8px; }
  .zone-bar > label { flex-basis: 100%; font-size: 11px; }
  .zone-bar > label .icon { display: block; width: 14px; height: 14px; }
  .zone-bar select { width: 0; font-size: 14px; }
  .zone-bar .button span { display: inline; }
  .zone-bar .button { font-size: 12px; }
  .map-options { padding: 3px 10px; gap: 4px; }
  .map-options > button { padding: 8px; }
  .find-landmark { max-width: 130px; }
  .find-landmark select { font-size: 12px; }
  .map-viewport { height: 48dvh; min-height: 310px; max-height: 560px; }
  .map-tools { padding: 8px; gap: 4px; }
  .tool { gap: 6px; }
  .tool .icon { width: 17px; }
  .tool span { font-size: 12px; }
  .map-footer { font-size: 10px; padding: 11px 13px; }
  .map-footer > span { display: none; }
  .map-caption { font-size: 11px; padding: 3px 12px 11px; }
  .map-zoom { right: 12px; }
  .scene-controls { gap: 8px; padding: 4px 10px; }
  .scene-controls label, .scene-controls button { font-size: 11px; }
  .scene-controls select { font-size: 16px; max-width: 105px; }
  .solution { margin-top: 15px; padding: 17px; }
  .solution .section-line { gap: 6px; }
  .solution .section-line h3 { font-size: 14px; }
  .solution .section-line .icon { display: none; }
  .status { font-size: 9px; padding: 6px; }
  .metrics { gap: 12px; }
  .metric strong { font-size: 33px; }
  .metric label { font-size: 10px; }
  .metric em { font-size: 10px; margin-left: 4px; }
  .solution-note { font-size: 10px; }
  .bottom-note { display: none; }
  .editor-heading { padding: 20px 17px 16px; }
  .editor-body, .editor-body:has(.point-card) { padding: 18px; display: block; }
  .point-title strong { font-size: 13px; }
  .point-title button { font-size: 12px; }
  .height-details summary { font-size: 12px; padding: 13px 0; }
  .height-fields input, .height-fields select { font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  .xy input { font-size: 17px; }
  .voice-card .key { display: none; }
  .card-grid, .settings-grid { grid-template-columns: 1fr; }
  .library-card, .settings-card { padding: 20px; }
  .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; padding: 8px 4px calc(env(safe-area-inset-bottom) + 8px); background: #101b2af5; border-top: 1px solid #34465b; backdrop-filter: blur(20px); z-index: 20; }
  .mobile-nav .nav-item { width: 62px; min-height: 48px; font-size: 10px; gap: 5px; }
  .mobile-nav .nav-item.active { background: #1d3542; }
  .mobile-nav .voice-nav { background: var(--accent); color: #12302d; border-radius: 15px; width: 48px; min-height: 48px; margin: 0 5px; }
  .mobile-nav .voice-nav span { display: none; }
  dialog { padding: 20px; width: calc(100% - 20px); max-height: 88dvh; }
  .dialog-head h2 { font-size: 20px; }
  #toast { bottom: calc(90px + env(safe-area-inset-bottom)); width: max-content; text-align: center; }
  .map-expanded .map-card { inset: 0; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .map-expanded .mobile-nav { display: none; }
  .map-expanded .map-viewport { min-height: 80px; max-height: none; }
  .map-expanded .map-top { min-height: 58px; padding: 6px 12px; }
  .map-expanded .map-name small { display: none; }
  .map-expanded .zone-bar { flex-wrap: nowrap; padding: 6px 12px; }
  .map-expanded .zone-bar > label { flex-basis: auto; font-size: 0; }
  .map-expanded .zone-bar > label .icon { width: 18px; height: 18px; }
}
@media(max-width:370px) { .brand-sub { display: none; } .workflow button { padding: 11px 8px; } .workflow .icon { display: none; } .metric strong { font-size: 28px; } .metric em { font-size: 9px; margin-left: 3px; } .zone-bar .button span { display: none; } .scene-controls { gap: 6px; } .scene-controls button { margin-left: 0; } .find-landmark { max-width: 115px; } }
@media(max-height:500px) and (orientation:landscape) { .map-expanded .map-top { min-height: 50px; padding: 3px 12px; } .map-expanded .zone-bar, .map-expanded .scene-controls { display: none; } .map-expanded .map-options { min-height: 42px; padding-top: 0; padding-bottom: 0; } .map-expanded .map-tools { padding: 3px 12px; } .map-expanded .map-caption { display: none; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.skip-link { position: fixed; z-index: 100; left: 15px; top: -100px; padding: 14px; background: var(--accent); color: #102c2a; border-radius: 8px; }
.skip-link:focus { top: 10px; }

/* Compact the zone selector on phones while retaining its accessible label. */
@media(max-width:700px) {
  .zone-bar { flex-wrap: nowrap; }
  .zone-bar > label { flex-basis: auto; font-size: 0; }
  .zone-bar > label .icon { width: 19px; height: 19px; }
  .zone-bar select { font-size: 16px; }
  .map-options .find-landmark select { font-size: 16px; }
}

.change-map { display: flex; align-items: center; gap: 5px; padding: 7px 0; min-height: 36px; color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.change-map .icon { width: 14px; height: 14px; }
@media(pointer:coarse) { .change-map { min-height: 44px; } }

.map-switch-list { display: grid; gap: 10px; }
.map-switch-option { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 16px; min-height: 78px; border: 1px solid var(--line); border-radius: 12px; background: #0e1b2a; }
.map-switch-option > span { flex: 1; min-width: 0; }
.map-switch-option strong { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.map-switch-option small { display: block; font-size: 12px; line-height: 1.5; margin-top: 5px; }
.map-switch-option > .icon { color: var(--accent); }
.map-switch-option.current { opacity: 1; border-color: #3f7772; background: #193a3b; }
.map-memory-note { margin: 17px 0 0; }
@media(hover:hover) { .map-switch-option:not(:disabled):hover { background: #203849; border-color: var(--accent); } }

/* Reference-game pictograms distinguish reported enemies from known landmarks. */
.tactical-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.enemy-tool { color: #ffaaa1; }
.enemy-tool .tactical-icon { width: 21px; height: 21px; }
.drill-summary { display:flex; align-items:center; gap:8px; padding:5px 16px; color:#c0ccdb; font-size:11px; }
.drill-summary .tactical-icon { width:20px; height:20px; }
.intel-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 15px; border-top:1px solid var(--line); font-size:12px; }
.intel-bar>span { display:flex; align-items:center; gap:9px; color:#ffd2cd; }
.intel-bar button { min-height:36px; color:#ffaaa1; }
.enemy-key { width:8px; height:8px; border:1.5px solid #ff8e85; transform:rotate(45deg); }
.enemy-palette { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:18px 0 24px; }
.enemy-palette button { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 3px; border:1px solid #68424c; background:#291e2b; border-radius:10px; min-height:80px; color:#ffd2cd; font-size:12px; }
.enemy-palette button:hover { background:#412a37; border-color:#ff8e85; }
.enemy-list { display:grid; gap:8px; }
.enemy-report { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px; border:1px solid var(--line); border-radius:10px; background:#111e2d; }
.enemy-report>span:nth-child(2) { min-width:0; flex:1; }
.enemy-report strong { display:block; overflow-wrap:anywhere; }
.enemy-report small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.enemy-report>span:last-child { color:#ffaaa1; font-size:11px; }
.enemy-edit-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.landmark-detail { display:flex; gap:16px; align-items:center; }
.landmark-detail .tactical-icon { width:44px; height:44px; }
.map-expanded .intel-bar,.map-expanded .drill-summary { flex-shrink:0; }
@media(max-width:360px) { .enemy-palette { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-height:500px) and (orientation:landscape) { .map-expanded .intel-bar,.map-expanded .drill-summary { display:none; } }

/* Match-day layout: map, one target and the three numbers you need. */
.game-menu { position:relative; z-index:12; }
.game-menu>summary { display:flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--line); padding:10px 13px; border-radius:10px; list-style:none; color:var(--muted); font-size:12px; }
.game-menu>summary::-webkit-details-marker { display:none; }
.game-menu>summary .icon:last-child { width:14px; }
.game-menu>div { position:absolute; right:0; top:50px; width:220px; padding:10px; display:grid; gap:7px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 14px 35px #0008; }
.game-menu .button { justify-content:flex-start; }
.expand-map { font-size:12px; padding:8px 10px; min-width:68px; }
.live-controls { background:#10242d; border-top:1px solid #34505a; padding:10px 14px 5px; flex-shrink:0; }
.live-target { display:flex; align-items:center; gap:6px; }
.live-target select { flex:1; width:0; font-size:14px; min-height:42px; padding:8px 10px; background:#0c1a25; }
.live-target>button { display:flex; align-items:center; justify-content:center; gap:4px; min-height:44px; padding:5px 10px; border:1px solid #34505a; border-radius:9px; font-size:12px; }
.live-target>button .icon { width:16px; }
.live-target>button:last-child { color:var(--accent); }
.live-values { display:grid; grid-template-columns:1fr 1fr 1fr 40px; align-items:center; gap:10px; padding:10px 0 6px; }
.live-values small { display:block; font-size:10px; margin-bottom:3px; }
.live-values strong { font-size:clamp(21px,2.2vw,30px); font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.live-values em { font-style:normal; color:var(--muted); font-size:10px; margin-left:5px; font-weight:400; }
.live-values .icon-button { width:40px; height:40px; }
.live-status { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:38px; }
.live-status>span { color:#a7c3ca; font-size:10px; }
.live-status.unsaved>span { color:var(--orange); }
.live-status>div { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.live-status button { min-height:40px; min-width:38px; padding:4px 8px; font-size:12px; color:var(--accent); }
.live-status button .icon { width:17px; vertical-align:middle; }
.enemy-count { color:#ffb7ad; font-size:10px; }
.solution>summary { display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; color:var(--muted); font-size:13px; min-height:30px; }
.solution>summary::-webkit-details-marker { display:none; }
.solution[open]>summary { margin-bottom:20px; }
.layer-options .drill-summary { padding:8px 0; align-items:flex-start; }
.workflow { display:none; }
.map-footer { display:none; }
.landmark-edit-row { display:grid; grid-template-columns:2fr 1fr 1fr 38px; gap:8px; align-items:end; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.landmark-edit-row label { margin:0; }
.landmark-edit-row input { margin-top:5px; }
.landmark-edit-row button { min-height:46px; color:var(--orange); }
@media(max-width:700px) {
 .header { height:48px; }
 .page { padding-top:12px; }
 .page-heading { flex-wrap:nowrap; align-items:center; gap:8px; margin-bottom:12px; }
 .page-heading>.actions { width:auto; display:flex; flex-shrink:0; }
 .page-heading .eyebrow { display:none; }
 .heading-title h1 { font-size:18px; letter-spacing:-.4px; }
 .heading-sub { margin-top:5px; gap:5px; font-size:10px; }
 .game-menu>summary { font-size:0; padding:9px; gap:5px; }
 .game-menu>summary>.icon { width:19px; }
 .map-top { min-height:61px; padding:7px 11px; }
 .zone-bar { flex-wrap:nowrap; padding:7px 10px; gap:6px; }
 .zone-bar>label { flex-basis:auto; font-size:0; }
 .zone-bar>label .icon { width:16px; }
 .zone-bar select { font-size:16px; min-height:42px; padding:7px; }
 .zone-bar .button span { display:none; }
 .zone-bar .button { min-height:42px; }
 .map-viewport { height:43dvh; min-height:250px; }
 .tool span { font-size:11px; }
 .map-caption { padding:3px 10px 7px; }
 .live-controls { padding:8px 10px 3px; }
 .live-target select { font-size:16px; }
 .live-target>button { padding:4px 8px; }
 .live-values { gap:6px; }
 .live-status button { padding:4px 6px; }
 .solution { padding:12px 16px; }
 .landmark-edit-row { grid-template-columns:1fr 1fr 38px; }
 .landmark-edit-row label:first-child { grid-column:1/-1; }
 input,textarea { font-size:16px; }
}
.map-expanded .map-viewport { max-height:none; min-height:80px; }
@media(max-height:560px) and (orientation:landscape) {
 .map-expanded .live-controls { position:absolute; right:10px; bottom:72px; width:320px; border:1px solid #34505a; border-radius:12px; background:#10242df5; }
 .map-expanded .live-values { padding-top:6px; }
 .map-expanded .live-values strong { font-size:21px; }
}

/* Desktop web edition: navigation above, battlefield between working panels. */
.web-edition .rail { display:none; }
.web-edition .workspace { width:100%; margin-left:0; }
.web-edition .header { min-height:68px; height:68px; padding:0 24px; gap:24px; background:#101925; border-bottom:1px solid #2b3a4d; }
.web-brand { text-decoration:none; color:var(--text); flex-shrink:0; gap:11px; }
.web-monogram { display:grid; place-content:center; position:relative; width:36px; height:36px; background:var(--accent); color:#12342f; border-radius:9px; font-size:26px; font-weight:800; }
.web-monogram>span { position:absolute; right:4px; top:1px; font-size:13px; }
.web-brand strong { font-size:16px; letter-spacing:1.9px; display:block; }
.web-brand strong em { font-style:normal; font-weight:500; font-size:10px; color:var(--accent); border:1px solid #35534f; padding:3px 5px; border-radius:4px; letter-spacing:1px; vertical-align:middle; margin-left:5px; }
.web-brand small { display:block; font-size:8px; letter-spacing:1.7px; margin-top:4px; }
#web-nav { display:flex; gap:4px; margin-right:auto; }
#web-nav .nav-item { width:auto; min-height:40px; display:flex; align-items:center; gap:8px; padding:0 15px; font-size:12px; border-radius:8px; }
#web-nav .nav-item .icon { width:17px; margin:0; }
.web-edition .header-actions { gap:8px; }
.web-edition .header-actions .button { min-height:38px; font-size:11px; padding:8px 12px; }
.web-edition .header-actions .icon-button { width:38px; height:38px; }
.web-edition .page { max-width:2200px; }
.target-rail { display:none; }
.cursor-coordinate { position:absolute; left:14px; bottom:12px; padding:7px 10px; border:1px solid #51637a66; border-radius:6px; background:#0c1725de; color:#d3e1ef; font:10px ui-monospace,monospace; pointer-events:none; }
kbd { display:inline-block; min-width:22px; border:1px solid #425568; border-bottom-width:2px; background:#142230; color:#c3d6e7; border-radius:5px; padding:3px 6px; font:10px ui-monospace,monospace; white-space:nowrap; }
.shortcut-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin:20px 0; }
.shortcut-grid>div { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding:10px 0; font-size:12px; }
.shortcut-grid span { text-align:right; color:var(--muted); }
@media(min-width:1024px) {
 .web-edition.planning .page { height:calc(100dvh - 68px); min-height:650px; padding:18px 22px; display:flex; flex-direction:column; }
 .web-edition.planning .page-heading { flex-shrink:0; margin-bottom:14px; min-height:52px; }
 .web-edition.planning .eyebrow { font-size:9px; margin-bottom:5px; }
 .web-edition.planning h1 { font-size:23px; letter-spacing:-.6px; }
 .web-edition.planning .heading-sub { font-size:11px; margin-top:5px; }
 .web-edition .planner { grid-template-columns:minmax(0,1fr) 310px; gap:16px; min-height:0; flex:1; align-items:stretch; }
 .web-edition .map-column { display:flex; flex-direction:column; min-height:0; }
 .web-edition .map-card { display:flex; flex-direction:column; flex:1; min-height:0; border-radius:14px; }
 .web-edition .map-top { min-height:58px; padding:7px 14px; flex-shrink:0; }
 .web-edition .map-name strong { font-size:14px; }
 .web-edition .change-map { font-size:10px; min-height:22px; }
 .web-edition .map-top-actions .segmented button { min-height:31px; }
 .web-edition .expand-map { min-height:38px; }
 .web-edition .map-config { display:grid; grid-template-columns:minmax(240px,1fr) auto; border-bottom:1px solid var(--line); background:#11232e; flex-shrink:0; }
 .web-edition .zone-bar { padding:5px 10px; background:transparent; border:0; gap:7px; }
 .web-edition .zone-bar>label { font-size:10px; }
 .web-edition .zone-bar>label .icon { display:none; }
 .web-edition .zone-bar select { min-height:35px; font-size:12px; padding:7px; }
 .web-edition .zone-bar .button { min-height:35px; padding:6px; }
 .web-edition .zone-bar .button span { display:none; }
 .web-edition .map-options { min-height:43px; padding:0 7px; border:0; gap:0; }
 .web-edition .map-options>button { font-size:10px; padding:5px 7px; min-height:36px; }
 .web-edition .layer-panel summary { font-size:11px; padding:8px; }
 .web-edition .find-landmark { max-width:110px; }
 .web-edition .find-landmark select { min-height:35px; font-size:10px; padding:6px; }
 .web-edition .map-viewport { flex:1; height:auto; min-height:170px; max-height:none; }
 .web-edition .map-tools { padding:5px 9px; gap:6px; flex-shrink:0; }
 .web-edition .tool { display:flex; align-items:center; justify-content:center; gap:7px; min-height:37px; padding:5px 8px; }
 .web-edition .tool span { font-size:11px; }
 .web-edition .tool .icon { width:17px; }
 .web-edition .map-caption { display:none; padding:4px 12px 8px; font-size:10px; flex-shrink:0; }
 .web-edition .map-card:has(.map-tools .active:not([data-place=pan])) .map-caption { display:block; }
 .web-edition .live-controls { display:grid; grid-template-columns:minmax(170px,1fr) minmax(220px,1.1fr); column-gap:20px; padding:9px 14px 3px; }
 .web-edition .live-target { grid-column:1; grid-row:1; }
 .web-edition .live-target select { min-height:35px; font-size:12px; padding:6px; }
 .web-edition .live-target>button { min-height:35px; padding:5px; font-size:10px; gap:3px; }
 .web-edition .live-target>button .icon { width:13px; }
 .web-edition .live-values { grid-column:2; grid-row:1/3; padding:3px 0; grid-template-columns:1fr 1fr 1fr 30px; gap:7px; }
 .web-edition .live-values strong { font-size:24px; }
 .web-edition .live-values .icon-button { width:30px; height:35px; }
 .web-edition .live-values em { font-size:9px; margin-left:3px; }
 .web-edition .live-status { grid-column:1; grid-row:2; }
 .web-edition .live-status>span { font-size:9px; }
 .web-edition .live-status button { min-width:28px; padding:4px; font-size:10px; min-height:33px; }
 .web-edition .solution { flex-shrink:0; margin-top:9px; padding:7px 13px; }
 .web-edition .solution>summary { min-height:28px; font-size:11px; }
 .web-edition .solution[open] { max-height:45dvh; overflow:auto; }
 .web-edition .bottom-note { margin-top:8px; font-size:9px; flex-shrink:0; }
 .web-edition .setup-column { overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:#354a5e transparent; padding-right:2px; }
 .web-edition .editor { border-radius:14px; }
 .web-edition .editor-heading { padding:17px 16px 13px; }
 .web-edition .editor-heading h2 { font-size:18px; }
 .web-edition .editor-heading .button { padding:7px; min-height:36px; }
 .web-edition .editor-body { padding:16px; }
 .web-edition .point-card { padding:14px 0; }
 .web-edition .point-title { gap:8px; }
 .web-edition .point-title strong { font-size:12px; }
 .web-edition .point-title button { font-size:10px; }
 .web-edition .voice-card { margin-top:12px; padding:14px; }
 .web-edition .voice-card strong { font-size:12px; }
 .web-edition .voice-card small { font-size:10px; }
 .web-edition.map-expanded .map-card { min-height:0; }
 .web-edition.map-expanded .map-viewport { min-height:80px; }
}
@media(min-width:1500px) {
 .web-edition .planner { grid-template-columns:210px minmax(0,1fr) 310px; gap:16px; }
 .target-rail { display:flex; flex-direction:column; min-height:0; padding:16px 12px; border:1px solid var(--line); background:#101b29; border-radius:14px; }
 .rail-section-head h2 { font-size:16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
 .rail-section-head h2 span { font-size:11px; background:#234148; color:var(--accent); padding:4px 7px; border-radius:6px; }
 .target-rail .button { font-size:11px; padding:9px 10px; }
 .target-rail .button kbd { margin-left:auto; border-color:#286e64; color:#1b4841; background:#8ce9d9; }
 .desktop-target-list { margin:14px -4px; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#354a5e transparent; flex:1; }
 .desktop-target { width:100%; display:flex; gap:9px; text-align:left; padding:12px 8px; border:1px solid transparent; border-radius:9px; margin-bottom:5px; }
 .desktop-target.selected { background:#17323b; border-color:#315961; }
 .desktop-target.completed { opacity:.55; }
 .desktop-target>span:last-child { min-width:0; }
 .target-index { font:10px ui-monospace,monospace; color:var(--accent); padding-top:3px; }
 .desktop-target strong { display:block; font-size:12px; overflow-wrap:anywhere; }
 .desktop-target small { display:block; font-size:9px; margin-top:5px; }
 .rail-empty { font-size:12px; line-height:1.7; color:var(--muted); padding:10px; }
 .rail-bottom { padding-top:12px; border-top:1px solid var(--line); }
 .rail-bottom .button { justify-content:flex-start; }
 .rail-bottom .button b { margin-left:auto; color:var(--orange); }
 .rail-link { display:flex; align-items:center; gap:7px; min-height:36px; font-size:10px; color:var(--muted); text-decoration:none; padding:6px; text-align:left; }
 .rail-link .icon { width:14px; }
}
@media(min-width:1024px) and (max-width:1199px) { .web-edition .planner { grid-template-columns:minmax(0,1fr) 280px; gap:12px; } .web-edition .find-landmark { display:none; } .web-edition .header { gap:15px; padding:0 18px; } #web-nav .nav-item { padding:0 10px; } }
@media(max-width:1100px) { .web-edition .header-actions>.button { display:none; } }
@media(max-width:1023px) { .web-edition .map-config { display:block; } .web-edition .page { padding-bottom:32px; } }
@media(max-width:700px) {
 #web-nav { display:none; }
 .web-edition .header { height:58px; min-height:58px; padding:0 14px; gap:10px; justify-content:space-between; }
 .web-brand strong { font-size:14px; }
 .web-brand small { font-size:7px; }
 .web-edition .page { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
 .cursor-coordinate { display:none; }
 .shortcut-grid { grid-template-columns:1fr; }
}

/* Quiet secondary details; shot preview stays closed until requested. */
.cursor-coordinate:empty { display:none; }
.pack-details,.shot-info { margin-top:14px; color:var(--muted); font-size:12px; }
.pack-details summary,.credits summary,.shot-info summary { cursor:pointer; padding:6px 0; }
.quick-help { padding-left:22px; line-height:1.8; }
#shot-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.shot-preview { margin-top:12px; border:1px solid var(--line); background:#101c29; border-radius:12px; padding:12px; }
.shot-preview>summary { cursor:pointer; font-size:13px; font-weight:600; min-height:26px; }
.shot-preview>summary span { float:right; font-size:10px; font-weight:400; color:var(--muted); padding-top:2px; }
.shot-target { margin-top:12px; font-size:12px; overflow-wrap:anywhere; }
.shot-profile { width:100%; height:auto; display:block; margin-top:4px; }
.shot-profile text { fill:#9cabbc; font-size:10px; }
.shot-ground { fill:none; stroke:#76947c; stroke-width:2; }
.shot-arc { fill:none; stroke:#f4d58b; stroke-width:2; stroke-dasharray:4 3; }
.shot-dot { fill:#fff2bd; }
.shot-stats { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); }
.shot-stats b { color:var(--text); font-weight:500; margin-left:3px; }
.shot-controls { display:flex; align-items:center; gap:6px; }
.shot-controls .button { min-height:38px; padding:6px 11px; }
.shot-controls select { width:62px; min-height:38px; padding:6px; }
.shot-clock { margin-left:auto; font:11px ui-monospace,monospace; white-space:nowrap; }
.shot-preview input[type=range] { width:100%; min-height:32px; padding:0; accent-color:#f4d58b; cursor:pointer; }
.shot-impact { font-size:11px; color:#f4d58b; margin:10px 0 0; }
.shot-info { margin-top:6px; font-size:11px; line-height:1.5; }
.shot-info p { margin:8px 0; }

.map-selector { display:flex; align-items:center; gap:10px; min-width:190px; min-height:54px; padding:6px 10px 6px 6px; border:1px solid #47736f; border-radius:10px; background:#17302f; text-align:left; }
.map-selector>img { width:52px; height:40px; object-fit:cover; border-radius:6px; filter:brightness(1.5); }
.map-selector>span { flex:1; min-width:0; }
.map-selector small { display:block; font-size:9px; letter-spacing:1px; color:#b5d9d0; margin-bottom:3px; }
.map-selector strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.map-selector>.icon { width:18px; flex-shrink:0; color:var(--accent); }
.map-selector:hover { background:#22433f; border-color:var(--accent); }
.map-switch-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.map-switch-option { display:grid; grid-template-columns:1fr auto; gap:0; padding:0; overflow:hidden; align-items:center; }
.map-choice-photo { grid-column:1/-1; position:relative; height:112px; background:#182c35; display:grid; place-items:center; }
.map-choice-photo>img { width:100%; height:100%; object-fit:cover; filter:brightness(1.5); }
.map-choice-photo>.icon { width:38px; height:38px; }
.map-selected { position:absolute; left:8px; top:8px; padding:4px 7px; background:#173f36; color:#c4f2cf; border-radius:5px; font-size:10px; }
.map-choice-label { padding:13px 10px; }
.map-switch-option>.icon { margin-right:10px; width:16px; }
.map-switch-option strong { font-size:14px; }
.map-switch-option small { font-size:10px; }
@media(max-width:700px) {
 .web-edition .map-top { flex-wrap:wrap; gap:8px; }
 .map-selector { flex:1; min-width:175px; }
 .map-switch-list { grid-template-columns:1fr; }
 .map-switch-option { grid-template-columns:95px 1fr auto; }
 .map-choice-photo { grid-column:auto; height:86px; }
 .map-selected { font-size:9px; }
}

.site-intro,.site-footer { padding:24px clamp(16px,3vw,40px); }
.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:12px; display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; padding-bottom:95px; }
.site-footer strong { color:var(--text); }.site-footer p { margin:7px 0 0; }.site-footer nav { display:flex; flex-wrap:wrap; gap:12px 22px; }.site-footer a { color:var(--accent); text-underline-offset:4px; }.site-footer small { width:100%; font-size:10px; }.map-expanded .site-footer { display:none; }

/* Fast, compositor-only motion; the map never animates during marker dragging. */
.boot-screen { min-height:65dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 24px; text-align:center; background:radial-gradient(ellipse at center,#173b3a55,transparent 65%); }
.boot-screen h1 { margin:12px 0; font-size:clamp(25px,4vw,42px); letter-spacing:-1.2px; }
.boot-screen p { max-width:520px; margin-bottom:16px; }.boot-eyebrow,.loading-eyebrow { font-size:10px; letter-spacing:2.4px; color:var(--accent); font-weight:700; }
.boot-screen .boot-description { font-size:12px; margin-top:36px; color:#7f97a4; max-width:400px; }
.scan-orb { width:112px; height:112px; border:1px solid #77e1cf55; border-radius:50%; position:relative; overflow:hidden; margin-bottom:26px; flex-shrink:0; background:repeating-radial-gradient(circle,transparent 0 17px,#77e1cf22 18px 19px),linear-gradient(90deg,transparent 49%,#77e1cf33 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#77e1cf33 50%,transparent 51%); }
.scan-orb::before { content:''; position:absolute; inset:0; background:conic-gradient(from 0deg,transparent 0deg,transparent 220deg,#77e1cf55 358deg,#b1fff3cc 360deg); animation:radar-sweep 2.8s linear infinite; }
.scan-orb i,.scan-orb b { width:5px; height:5px; position:absolute; border-radius:50%; background:#b0fff0; left:30%; top:25%; animation:signal-pulse 2.8s ease-out infinite; }.scan-orb b { left:65%; top:64%; animation-delay:1.1s; }
.boot-track { width:180px; height:3px; border-radius:4px; background:#223c40; overflow:hidden; }.boot-track i { display:block; width:45%; height:100%; background:var(--accent); animation:loading-travel 1.6s ease-in-out infinite; }
.map-loading { position:absolute; left:18px; bottom:18px; z-index:5; display:flex; align-items:center; gap:14px; width:min(390px,calc(100% - 80px)); padding:17px 19px; border:1px solid #77e1cf55; border-radius:15px; background:#0c1b27f5; box-shadow:0 14px 36px #0005; pointer-events:none; animation:panel-arrive .2s ease-out; }
.map-loading[hidden],.map-loading [hidden],.ruler-readout[hidden] { display:none; }.map-loading button { pointer-events:auto; }.map-loading[data-state=error] { border-color:#e7b77c88; }.map-loading[data-state=error] .scan-orb::before,.map-loading[data-state=error] .scan-orb i,.map-loading[data-state=error] .scan-orb b { animation:none; opacity:.25; }
.scan-orb.compact { width:58px; height:58px; margin:0; }.loading-copy { display:grid; gap:5px; min-width:0; flex:1; }.loading-copy strong { font-size:15px; }.loading-copy>span:last-of-type { font-size:11px; color:var(--muted); line-height:1.4; }
.loading-copy progress { width:100%; height:4px; border:0; border-radius:3px; overflow:hidden; appearance:none; background:#284249; margin-top:5px; accent-color:var(--accent); }.loading-copy progress::-webkit-progress-bar { background:#284249; }.loading-copy progress::-webkit-progress-value { background:var(--accent); transition:width .1s linear; }.loading-copy progress::-moz-progress-bar { background:var(--accent); }
.loading-copy progress:not([value]) { background:linear-gradient(90deg,#284249,var(--accent),#284249); background-size:200% 100%; animation:progress-sweep 1.6s linear infinite; }
.scene-arrive { animation:scene-arrive .3s ease-out; }
.point-actions { display:flex; align-items:center; gap:5px; margin:8px 0 10px; flex-wrap:wrap; }.point-actions button { display:flex; align-items:center; justify-content:center; gap:5px; min-height:32px; padding:5px 8px; font-size:10px; color:#b7c9d3; border:1px solid #334957; border-radius:7px; transition:background .15s,border-color .15s; }.point-actions .icon { width:13px; height:13px; }.point-actions button:hover:not(:disabled) { background:#21433f; border-color:var(--accent); }.point-actions button[aria-pressed=true] { color:var(--accent); border-color:#77e1cf88; background:#21433f55; }.point-actions button:last-child { margin-left:auto; }
.map-tools { grid-template-columns:repeat(6,minmax(0,1fr)); }.tool[data-place=measure].active { color:#ebcaff; background:#654e8266; }
.ruler-readout { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; background:#20172fee; border:1px solid #b38ad477; border-radius:12px; padding:11px 15px; box-shadow:0 5px 25px #0004; z-index:4; width:max-content; max-width:calc(100% - 32px); pointer-events:none; }.ruler-readout>span:nth-child(2) { display:grid; gap:3px; }.ruler-readout strong { font-size:13px; color:#f1ddff; }.ruler-readout small { font-size:10px; color:#c6b2d8; }.ruler-symbol { font-size:25px; color:#d6b3f4; }.ruler-readout button { pointer-events:auto; font-size:22px; min-width:32px; min-height:32px; }
.map-viewport:has(.ruler-readout:not([hidden])) .map-loading { bottom:92px; }
#modal[open] #modal-content { animation:panel-arrive .18s ease-out; }.map-switch-option { transition:border-color .18s,background .18s; }.tool { transition:background .15s,color .15s; }
@keyframes radar-sweep { to { transform:rotate(360deg); } }@keyframes signal-pulse { 0%,15% { opacity:1; transform:scale(1); }70%,100% { opacity:.2; transform:scale(.7); } }
@keyframes loading-travel { 0% { transform:translateX(-100%); }100% { transform:translateX(330%); } }@keyframes progress-sweep { to { background-position:-200% 0; } }
@keyframes panel-arrive { from { opacity:0; transform:translateY(7px); }to { opacity:1; transform:translateY(0); } }@keyframes scene-arrive { from { opacity:.7; }to { opacity:1; } }
@media(max-width:700px) { .map-loading { padding:12px; gap:10px; left:10px; bottom:10px; }.scan-orb.compact { width:42px; height:42px; }.loading-copy strong { font-size:13px; }.loading-eyebrow { font-size:8px; }.point-actions button { min-height:38px; }.map-tools { grid-template-columns:repeat(6,minmax(0,1fr)); }.map-tools .tool { padding:6px 2px; }.map-tools .tool span { font-size:9px; }.ruler-readout { bottom:10px; }.boot-screen { min-height:60dvh; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }