:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172640; background: #f7f9fc; font-size: 16px; --topbar-height: 82px; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
a { color: inherit; }
.topbar { height: var(--topbar-height); display: flex; align-items: center; gap: 20px; padding: 0 28px; background: #fff; border-bottom: 1px solid #dde4ed; }
.brand { display: block; flex: 0 1 272px; min-width: 0; text-decoration: none; }
.brand img { display: block; width: 100%; height: auto; }
.embed-link { margin-left: auto; flex: 0 0 auto; font-size: 14px; text-decoration: none; color: #52637a; border-bottom: 1px solid #b9c5d5; padding-bottom: 2px; }
.embed-link-short { display: none; }
.workspace { display: grid; grid-template-columns: 312px minmax(0, 1fr); height: calc(100dvh - var(--topbar-height)); }
.sidebar { background: #fff; border-right: 1px solid #dde4ed; overflow: auto; padding: 30px 26px 24px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.9px; color: #076ae1; }
h1 { font-size: 27px; line-height: 1.25; letter-spacing: -0.9px; margin: 12px 0 10px; font-weight: 680; }
.intro p { color: #65768c; font-size: 14px; line-height: 1.65; margin: 0; }
.sidebar section + section { margin-top: 25px; }
.section-label { font-size: 12px; letter-spacing: 1.3px; font-weight: 700; color: #65768c; margin-bottom: 13px; }
.zip-section .section-label { display: block; }
.zip-search-row { display: flex; gap: 9px; }
.zip-search-row input { width: 100%; min-width: 0; border: 1px solid #dce3ed; border-radius: 5px; background: #f8fafd; padding: 10px; font-size: 14px; color: #172640; font-variant-numeric: tabular-nums; }
.zip-search-row .primary-button { width: auto; flex: 0 0 auto; margin: 0; padding: 10px 13px; }
.primary-button:disabled { opacity: 0.65; cursor: wait; }
.zip-result { color: #65768c; font-size: 12px; line-height: 1.55; margin: 9px 0 0; }
.zip-result.is-error { color: #a22a32; }
.zip-credit { color: #65768c; font-size: 10px; line-height: 1.5; margin: 6px 0 0; }
.zip-credit a { text-underline-offset: 2px; }
.coordinate-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coordinate-inputs label { font-size: 13px; color: #52637a; }
input[type="number"] { display: block; width: 100%; min-width: 0; margin-top: 6px; border: 1px solid #dce3ed; border-radius: 5px; background: #f8fafd; padding: 10px 8px; font-size: 14px; font-variant-numeric: tabular-nums; color: #172640; }
input:focus-visible, button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #8bbdf7; outline-offset: 3px; }
.primary-button { display: block; width: 100%; border: 0; border-radius: 5px; padding: 11px 14px; margin-top: 11px; background: #076ae1; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.primary-button:hover { background: #065cc5; }
.secondary-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #b7d4f6; border-radius: 5px; background: #f1f7ff; color: #076ae1; padding: 10px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.secondary-button:hover { background: #e6f0ff; }
.secondary-button:disabled { opacity: 0.65; cursor: wait; }
.secondary-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.location-result { color: #65768c; font-size: 12px; line-height: 1.55; margin: 8px 0 15px; }
.location-result.is-error { color: #a22a32; }
.intro .secondary-button { margin-top: 17px; }
.intro .location-result { font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.text-button { background: none; border: 0; padding: 0; margin-top: 12px; color: #65768c; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nearest-section { padding-top: 23px; border-top: 1px solid #edf0f4; }
.nearest-distance { display: flex; align-items: baseline; gap: 8px; }
.nearest-distance > span:first-child { font-size: 38px; font-weight: 620; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.nearest-distance .unit { font-size: 14px; color: #65768c; }
.nearest-detail { display: flex; align-items: center; gap: 8px; color: #52637a; font-size: 14px; margin-top: 10px; }
.line-swatch { width: 10px; height: 10px; background: #dce3ed; border: 1px solid #52637a55; border-radius: 2px; flex: 0 0 auto; }
.legend { padding: 0; margin: 0; list-style: none; display: grid; gap: 11px; }
.legend li { display: flex; gap: 12px; align-items: center; color: #52637a; font-size: 14px; }
.legend-line { display: block; width: 24px; height: 5px; border-radius: 3px; background: var(--line-color); box-shadow: 0 0 0 1px #34496655; }
.legend-substation { width: 9px; height: 9px; margin: 0 7.5px; border-radius: 50%; background: #076ae1; box-shadow: 0 0 0 2px #dbeaff; }
.options-section { padding-top: 22px; border-top: 1px solid #edf0f4; }
.checkbox-label { display: flex; gap: 10px; align-items: center; font-size: 14px; }
input[type="checkbox"] { height: 17px; width: 17px; margin: 0; accent-color: #076ae1; }
.options-link { display: inline-block; margin-top: 18px; font-size: 13px; color: #65768c; text-underline-offset: 3px; }
.units-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 14px; }
.units-label select { min-width: 0; border: 1px solid #dce3ed; border-radius: 5px; padding: 7px; font-size: 13px; color: #172640; background: #f8fafd; }
.sample-note { background: #f3f6fa; border-left: 3px solid #adc6e7; padding: 13px 14px; border-radius: 0 5px 5px 0; }
.sample-note-title { font-size: 13px; font-weight: 650; }
.sample-note p { font-size: 12px; line-height: 1.6; color: #65768c; margin: 7px 0 0; }
.map-pane { position: relative; min-width: 0; min-height: 0; }
emf-map { width: 100%; height: 100%; }
.map-pane > emf-map { height: calc(100% - 35px); }
.map-footer { position: absolute; bottom: 0; left: 0; right: 0; min-height: 35px; background: #ffffffef; border-top: 1px solid #dce3ed; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px; font-size: 12px; color: #65768c; }
.map-footer span:last-child { white-space: nowrap; }
@media (min-height: 850px) { .sidebar { padding-top: 40px; } .sidebar section + section { margin-top: 30px; } }
@media (max-width: 760px) { :root { --topbar-height: 72px; } .topbar { gap: 13px; padding: 0 17px; } .brand { flex-basis: 232px; } .embed-link { font-size: 12px; } .embed-link-full { display: none; } .embed-link-short { display: inline; } .workspace { display: flex; flex-direction: column; height: auto; min-height: 0; } .map-pane { order: -1; height: 62dvh; min-height: 440px; } .sidebar { padding: 26px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border-right: 0; border-top: 1px solid #dde4ed; overflow: visible; } .sidebar section + section { margin-top: 0; } .intro { grid-column: 1/-1; } .intro p { max-width: 450px; } .nearest-section, .options-section { border-top: 0; padding-top: 0; } .sample-note { grid-column: 1/-1; } }
@media (max-width: 410px) { .sidebar { grid-template-columns: 1fr; } .map-footer { padding: 8px 12px; font-size: 11px; } }