.cm { --cm-border:#e4e4e7; --cm-muted:#71717a; color:#18181b; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding-bottom:56px; }
.cm * { box-sizing:border-box; }
.cm [hidden] { display:none!important; }
.cm button,.cm input,.cm select { font:inherit; }
.cm button { cursor:pointer; }
.cm button:disabled { opacity:.4; cursor:default; }
.cm :is(button,input,select,a,summary):focus-visible { outline:3px solid #93b8f4; outline-offset:3px; }
.cm h1,.cm h2,.cm h3,.cm p { margin:0; }
.cm a { color:inherit; }
.cm-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 30px; }
.cm h1 { font-size:36px; line-height:1.2; font-weight:650; letter-spacing:-1.2px; margin-bottom:12px; }
.cm-intro p { font-size:16px; line-height:1.6; color:var(--cm-muted); }
.cm-badge { border:1px solid var(--cm-border); background:#fafafa; border-radius:20px; padding:8px 12px; white-space:nowrap; font-size:12px; color:#52525b; }
.cm-workspace { display:grid; grid-template-columns:290px minmax(0,1fr); align-items:start; gap:20px; }
.cm-card { border:1px solid var(--cm-border); border-radius:12px; background:#fff; box-shadow:0 1px 3px #00000006; min-width:0; overflow:hidden; }
.cm fieldset { margin:0; padding:0; border:0; min-width:0; }
.cm-section { padding:22px; }
.cm-section+.cm-section { border-top:1px solid var(--cm-border); }
.cm h2 { font-size:18px; line-height:1.4; font-weight:600; letter-spacing:-.3px; }
.cm-section h2 { display:flex; align-items:center; gap:9px; margin-bottom:18px; font-size:16px; }
.cm-step { display:inline-flex; justify-content:center; align-items:center; width:23px; height:23px; border-radius:50%; background:#f4f4f5; color:#71717a; font-size:12px; font-weight:500; }
.cm-palette { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; padding:3px; }
.cm-swatch { width:100%; aspect-ratio:1; border:1px solid #0001; border-radius:50%; padding:0; position:relative; }
.cm-swatch[aria-pressed=true] { outline:2px solid #18181b; outline-offset:3px; }
.cm-custom-color { display:flex; gap:10px; align-items:center; margin:20px 0; font-size:12px; }
.cm-custom-color label { flex:1; }
.cm input[type=color] { width:30px; height:30px; background:#fff; border:1px solid #d4d4d8; border-radius:6px; padding:2px; cursor:pointer; }
.cm-custom-color output { color:var(--cm-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.cm-modes { display:flex; background:#f4f4f5; padding:4px; border-radius:7px; }
.cm-modes button { flex:1; border:0; background:transparent; color:#71717a; border-radius:5px; padding:9px 4px; font-size:12px; }
.cm-modes button[aria-pressed=true] { background:#fff; color:#18181b; box-shadow:0 1px 3px #0001; }
.cm .cm-hint { font-size:12px; color:var(--cm-muted); line-height:1.6; }
.cm-modes+.cm-hint { margin-top:10px; }
.cm-label { display:block; font-size:12px; font-weight:550; margin:14px 0 7px; }
.cm-label span { color:var(--cm-muted); font-weight:400; }
.cm input:is([type=search],[type=text]),.cm select { width:100%; border:1px solid #d4d4d8; background:#fff; padding:10px; color:#27272a; border-radius:6px; min-width:0; font-size:13px; }
.cm input::placeholder { color:#a1a1aa; }
.cm-controls { overflow:visible; }
.cm-search { position:relative; z-index:2; }
.cm-search-box { position:relative; }
.cm-search-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.cm-search-fields>div { min-width:0; }
.cm-search-fields select { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:22px; }
.cm-county-actions:has(button:not([hidden])) { margin-top:12px; }
.cm-county-actions .cm-btn,.cm-county-actions .cm-text-btn { font-size:11px; padding:7px; }
.cm-search-popup { position:absolute; z-index:10; top:calc(100% + 6px); right:0; width:100%; max-width:calc(100vw - 64px); background:#fff; border:1px solid var(--cm-border); border-radius:8px; box-shadow:0 8px 24px #0002; overflow:hidden; }
.cm #search-status { padding:10px 12px; background:#fafafa; }
.cm-search-results { list-style:none; padding:0; margin:0; max-height:260px; overflow:auto; }
.cm-search-results li+li { border-top:1px solid #f4f4f5; }
.cm-search-results button { width:100%; padding:10px 12px; text-align:left; font-size:12px; border:0; background:#fff; color:#27272a; line-height:1.5; }
.cm-search-results button:hover,.cm-search-results button:focus-visible { background:#eff6ff; outline-offset:-3px; }
.cm-check { display:flex; align-items:center; gap:8px; margin:15px 0 8px; font-size:12px; line-height:1.5; }
.cm-check input { accent-color:#2563eb; margin:0; }
.cm-result-header { padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.cm-result-header p { color:var(--cm-muted); font-size:12px; margin-top:6px; }
.cm-result-header strong { color:#27272a; font-weight:550; }
.cm-header-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.cm-export-link { color:#1d4ed8!important; font-size:12px; font-weight:600; white-space:nowrap; text-decoration:underline; }
.cm-settings-export { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:26px 24px 28px; border-top:1px solid #bfdbfe; background:#eff6ff; scroll-margin-top:80px; }
.cm-settings-copy { flex:1 1 300px; min-width:0; }
.cm-settings-export h2 { font-size:18px; margin-bottom:7px; }
.cm-settings-copy p { font-size:13px; line-height:1.6; color:#475569; }
.cm-settings-copy a { color:#1d4ed8; text-decoration:underline; }
.cm-settings-export .cm-actions { max-width:100%; }
.cm-settings-download { width:100%; font-size:12px; color:#52525b; }
.cm-settings-download a { margin-left:8px; text-decoration:underline; }
.cm-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--cm-border); border-radius:6px; padding:10px 14px; background:#fff; color:#27272a; font-size:13px; font-weight:550; white-space:nowrap; }
.cm-btn:hover:not(:disabled) { background:#f4f4f5; }
.cm-primary { color:#fff; background:#18181b; border-color:#18181b; }
.cm-primary:hover:not(:disabled) { background:#3f3f46; }
.cm-small { padding:7px 10px; font-size:12px; }
.cm-text-btn { border:0; background:transparent; color:#71717a; font-size:12px; padding:7px 3px; }
.cm-text-btn:hover:not(:disabled) { color:#18181b; }
.cm-toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:0 24px 16px; border-bottom:1px solid #f4f4f5; }
.cm-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.cm-map-stage { padding:20px 18px 0; min-height:260px; }
#county-map { width:100%; position:relative; touch-action:none; }
#county-map svg path { cursor:crosshair; }
#county-map .fm-tooltip { min-width:0; pointer-events:none; }
#county-map .fm-tooltip-name { font-family:inherit; font-size:13px; line-height:1.5; text-shadow:none; color:#18181b; background:#fff; padding:6px 9px; border:1px solid var(--cm-border); border-radius:6px; box-shadow:0 3px 12px #0001; }
.cm .cm-map-status { padding:16px 24px; min-height:52px; color:var(--cm-muted); font-size:12px; line-height:1.6; }
.cm-legend-heading { margin-bottom:14px; }
.cm-legend-heading h2 { margin-bottom:6px; }
.cm h3 { font-size:14px; font-weight:600; }
#legend-rows { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.cm-legend-row { display:flex; align-items:center; gap:8px; min-width:0; }
.cm-legend-row button { width:20px; height:20px; border:1px solid #0002; border-radius:5px; flex-shrink:0; padding:0; }
.cm-legend-row input[type=text] { padding:7px 9px; font-size:12px; }
.cm-legend-row span { font-size:11px; color:var(--cm-muted); min-width:20px; text-align:right; }
.cm .cm-notice { border:1px solid #dbeafe; border-radius:7px; background:#eff6ff; color:#1e40af; font-size:13px; padding:12px 15px; margin:0 0 15px; line-height:1.6; }
.cm-result>.cm-notice { margin:15px 24px 0; }
.cm-notice a { text-decoration:underline; margin-left:8px; }
.cm-guide { margin:36px 0; padding:32px; border:1px solid var(--cm-border); border-radius:12px; background:#fafafa; display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.cm-eyebrow { color:var(--cm-muted); font-size:10px; letter-spacing:1.6px; font-weight:600; }
.cm-guide h2 { font-size:26px; line-height:1.3; margin:12px 0; max-width:350px; }
.cm-guide p { color:var(--cm-muted); font-size:13px; line-height:1.7; }
.cm-guide ol { list-style:decimal; margin:0; padding-left:20px; }
.cm-guide li { padding-left:5px; font-size:13px; }
.cm-guide li+li { margin-top:15px; }
.cm-guide li p { margin-top:4px; }
.cm-faq { margin-bottom:36px; }
.cm-faq details { border-bottom:1px solid var(--cm-border); padding:17px 0; }
.cm-faq summary { cursor:pointer; font-size:14px; font-weight:550; }
.cm-faq p { max-width:900px; font-size:13px; line-height:1.8; color:var(--cm-muted); margin-top:12px; }
.cm-related { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:center; border-top:1px solid var(--cm-border); padding-top:28px; }
.cm-related p,.cm-related span { display:block; margin-top:8px; font-size:12px; color:var(--cm-muted); line-height:1.6; }
.cm-related a { text-decoration:none; font-size:13px; }
.cm-related a:hover strong { text-decoration:underline; }
@media(min-width:1300px) { .cm.container { max-width:1280px; } }
@media(max-width:1000px) { .cm-workspace { grid-template-columns:250px minmax(0,1fr); gap:14px; } .cm-section { padding:18px; } .cm-palette { grid-template-columns:repeat(4,26px); gap:12px; } .cm-result-header { flex-wrap:wrap; } .cm-toolbar { padding-left:16px; padding-right:16px; } #legend-rows { grid-template-columns:1fr; } }
@media(max-width:700px) { .cm h1 { font-size:29px; } .cm-intro { align-items:flex-start; flex-direction:column; gap:12px; padding-top:12px; } .cm-intro p { font-size:14px; } .cm-workspace { display:flex; flex-direction:column; } .cm-controls,.cm-result { width:100%; } .cm-palette { grid-template-columns:repeat(8,26px); gap:12px; } .cm-section { padding:20px; } .cm-modes { max-width:360px; } .cm-custom-color { justify-content:flex-start; } .cm-custom-color label { flex:0 0 auto; } .cm-result-header { padding:20px; } .cm-result-header h2 { font-size:16px; } .cm-map-stage { padding:15px 8px 0; min-height:0; } .cm-map-status { padding:12px 18px!important; } .cm-guide { padding:24px; grid-template-columns:1fr; gap:24px; } .cm-guide h2 { font-size:23px; } .cm-related { grid-template-columns:1fr; } .cm input:is([type=search],[type=text]),.cm select { font-size:16px; } .cm-legend-row input[type=text] { font-size:16px; } }
@media(max-width:370px) { .cm-palette { grid-template-columns:repeat(8,22px); gap:10px; } }