@charset "UTF-8";
:root { color-scheme: dark; --bg:#11130f; --panel:#1a1d16; --text:#ecebe2; --muted:#a7ab9a; --accent:#d4e999; --border:#34392b; --mono:"DejaVu Sans Mono","Liberation Mono",Consolas,monospace; --sans:"DejaVu Sans","Liberation Sans",Arial,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--bg); color:var(--text); font:13px/1.7 var(--sans); }
button,input,select { font:inherit; }
select { color:var(--text); background:#10140d; border:1px solid #485338; padding:9px 11px; min-height:42px; }
.route-kind-label { margin-top:14px; }
.route-feedback { color:var(--accent); font-size:12px; line-height:1.8; margin-top:12px; }
.route-feedback[data-level=error] { color:#edb39b; }
button { cursor:pointer; color:var(--text); border:1px solid #485338; background:#22291b; padding:9px 12px; min-height:42px; }
button:hover { background:#303b24; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input:not([type=checkbox]):not([type=file]) { color:var(--text); background:#10140d; border:1px solid #485338; border-radius:0; padding:9px 11px; min-width:0; }
a { color:var(--accent); text-decoration:none; }
header { height:74px; padding:0 28px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { color:var(--text); font:900 16px/1.3 Impact,"Arial Narrow",sans-serif; letter-spacing:-.025em; }
.brand span { color:var(--accent); }
.preview-tag { font:9px/1.7 var(--mono); color:var(--muted); letter-spacing:.05em; }
.back-link { font-size:11px; }
main { display:grid; grid-template-columns:320px 1fr; height:calc(100dvh - 74px); min-height:500px; }
.sidebar { overflow-y:auto; background:var(--bg); border-right:1px solid var(--border); }
.sidebar-title { padding:27px 24px; border-bottom:1px solid var(--border); }
.eyebrow { color:var(--accent); font:9px/1.6 var(--mono); letter-spacing:.08em; }
h1,h2,p { margin:0; }
h1 { font:900 49px/1.2 Impact,"Arial Narrow","DejaVu Sans Condensed",sans-serif; letter-spacing:-.04em; margin-top:10px; }
h1 span { color:var(--accent); }
.sidebar-title>p:last-child { color:var(--muted); margin-top:10px; font-size:12px; }
.control-section { padding:22px 24px; border-bottom:1px solid var(--border); }
.field-label { display:block; font:9px/1.7 var(--mono); color:#b5c19e; margin-bottom:9px; letter-spacing:.05em; }
.search-row { display:flex; gap:7px; }
.search-row input { flex:1; width:0; }
.plain-button { display:block; border:0; padding:10px 0 0; background:transparent!important; color:var(--accent); font-size:11px; min-height:35px; }
.full-input { width:100%; }
h2 { font-size:16px; letter-spacing:-.02em; font-weight:500; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; gap:15px; }
.section-heading>span { font:10px var(--mono); color:var(--muted); }
.primary-button { display:block; width:100%; margin-top:10px; background:var(--accent); border-color:var(--accent); color:#1a2111; font-weight:600; }
.primary-button:hover,.primary-button[aria-pressed=true] { background:#e5f6b9; }
.help { color:var(--muted); font-size:11px; line-height:1.8; margin-top:10px; }
.button-row { display:flex; gap:8px; margin-top:12px; }
.button-row>* { flex:1; font-size:11px; padding-inline:7px; }
.route-distance { border-top:1px solid var(--border); padding-top:15px; margin-top:15px; }
.route-distance>span { display:block; color:var(--muted); font:8px/1.7 var(--mono); }
.route-distance>strong { display:block; color:var(--accent); font:20px/1.7 var(--mono); margin-top:6px; }
.checkbox { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:12px; }
.checkbox input { accent-color:var(--accent); width:16px; height:16px; }
.source-note { color:var(--muted); font-size:10px; line-height:1.9; }
.source-note p+p { margin-top:10px; }
.source-note strong { color:#c8d2b8; font-weight:500; }
.source-note a { text-decoration:underline; text-underline-offset:3px; }
.map-area { position:relative; min-width:0; min-height:0; overflow:hidden; background:#a8b47c; }
canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
canvas.is-drawing { cursor:crosshair; }
canvas.is-panning { cursor:grabbing; }
.map-tools { position:absolute; top:20px; right:20px; display:flex; flex-direction:column; box-shadow:0 3px 18px #0004; }
.map-tools button { font:24px/1 var(--mono); width:44px; height:44px; padding:0; background:#151b12ed; color:var(--accent); }
.map-tools button+button { border-top:0; }
.map-hint { position:absolute; top:20px; left:20px; max-width:calc(100% - 100px); padding:7px 11px; background:#151b12e8; color:#dbe4ca; font-size:10px; pointer-events:none; }
.crosshair { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:18px var(--mono); color:#18210d; text-shadow:0 0 3px #fff; pointer-events:none; opacity:.65; }
.map-status { position:absolute; bottom:0; left:0; right:0; padding:10px 16px; display:flex; justify-content:space-between; gap:20px; background:#11170dec; font:9px/1.7 var(--mono); color:#c2cfac; pointer-events:none; }
.toast { position:absolute; bottom:52px; left:50%; transform:translateX(-50%); max-width:calc(100% - 30px); width:max-content; padding:12px 16px; background:#15200df5; color:var(--accent); box-shadow:0 5px 25px #0005; font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:900px) { main { grid-template-columns:280px 1fr; } .control-section,.sidebar-title { padding-inline:18px; } header { padding-inline:20px; } .preview-tag { display:none; } }
@media(max-width:650px) { header { height:62px; padding-inline:16px; } .brand { font-size:14px; } .back-link { font-size:10px; } main { display:flex; flex-direction:column; height:auto; min-height:0; } .map-area { order:-1; height:64dvh; min-height:360px; } .sidebar { overflow:visible; border-right:0; } .sidebar-title { padding-block:20px; } .sidebar-title h1 { font-size:38px; } .control-section { padding:20px; } .map-hint { left:12px; top:12px; max-width:calc(100% - 77px); font-size:9px; } .map-tools { top:12px; right:12px; } .map-status { font-size:8px; padding-inline:10px; gap:10px; } .help,.source-note { font-size:12px; } }