* {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    margin: 0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: #f6f7f3;
    color: #1f2933;
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: #25636f;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

button,
input,
select {
    font: inherit;
}

code,
pre {
    font-family:
        "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;
}

.site-header {
    background: #ffffff;
    border-bottom: 1px solid #d8ded7;
}

.site-header__inner,
.page {
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto;
}

.site-header__inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    color: #17222b;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.site-nav a,
.button,
.preset-btn,
.profile-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #c6cec7;
    border-radius: 6px;
    background: #ffffff;
    color: #1f2933;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.site-nav a:hover,
.button:hover,
.preset-btn:hover,
.profile-btn:hover {
    background: #eef2ed;
}

.site-nav a[aria-current="page"],
.preset-btn.active,
.profile-btn.active {
    background: #2f6f58;
    border-color: #2f6f58;
    color: #ffffff;
}

.page {
    padding: 32px 0 44px;
}

.action-row,
.nav-row,
.btn-row,
.profile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.action-row {
    margin-top: 20px;
}

.button--primary {
    background: #2f6f58;
    border-color: #2f6f58;
    color: #ffffff;
}

.button--primary:hover {
    background: #285e4b;
}

.doc-block {
    max-width: 920px;
    padding: 18px 0;
    border-top: 1px solid #d8ded7;
}

.doc-block--lead {
    padding-top: 10px;
    border-top: 0;
}

.doc-block h1,
.doc-block h2 {
    margin: 0 0 10px;
    color: #17222b;
    letter-spacing: 0;
}

.doc-block h1 {
    font-size: 28px;
    line-height: 1.15;
}

.doc-block h2 {
    font-size: 17px;
}

.doc-block p {
    margin: 0;
    max-width: 780px;
    color: #46535f;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #d8ded7;
    background: #ffffff;
}

.doc-table th,
.doc-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #d8ded7;
    text-align: left;
    vertical-align: top;
}

.doc-table th {
    width: 280px;
    color: #17222b;
    font-size: 13px;
    font-weight: 700;
}

.doc-table td {
    color: #46535f;
}

.doc-table code,
.doc-block code {
    color: #24313d;
    font-size: 12px;
}

.code-block {
    margin: 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid #d8ded7;
    border-radius: 6px;
    background: #ffffff;
    color: #24313d;
    font-size: 12px;
    line-height: 1.55;
}

.doc-note {
    margin-top: 8px !important;
    font-size: 13px;
}

.request-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.request-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid #d8ded7;
    border-radius: 8px;
    background: #ffffff;
}

.request-card h3 {
    margin: 0 0 6px;
    color: #17222b;
    font-size: 14px;
}

.request-card p {
    min-height: 58px;
    margin: 0 0 10px;
    color: #52616e;
    font-size: 13px;
}

.request-output {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.request-output__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: #17222b;
}

#request-status {
    color: #52616e;
    font-size: 12px;
}

.app-body {
    height: 100vh;
    overflow: hidden;
    background: #17222b;
}

#map {
    position: absolute;
    inset: 0;
}

#panel {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    width: min(336px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.22);
    font-size: 13px;
}

#instructions-panel,
#elevation-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 24px));
    height: min(520px, calc(100vh - 24px));
    padding: 14px;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.22);
    font-size: 13px;
}

.panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#instructions-panel .panel-title h2,
#elevation-panel .panel-title h2,
.panel-title h1,
.panel h1 {
    margin: 0;
    color: #17222b;
    font-size: 17px;
    line-height: 1.2;
}

.panel-kicker {
    margin: 3px 0 0;
    color: #667480;
    font-size: 12px;
}

#info {
    color: #46535f;
    margin-bottom: 8px;
}

#route-info {
    min-height: 20px;
    margin-top: 6px;
    color: #17222b;
    font-weight: 700;
}

.instructions-empty {
    margin: 0;
    color: #667480;
    font-size: 12px;
}

.instructions-list {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.instruction-item {
    width: 100%;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 6px;
    padding: 8px;
    border: 1px solid #d8ded7;
    border-radius: 7px;
    background: #ffffff;
    color: #1f2933;
    cursor: pointer;
    text-align: left;
}

.instruction-item:hover,
.instruction-item.active {
    border-color: #2f6f58;
    background: #eef6f1;
}

.instruction-item__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #2f6f58;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.instruction-item__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.instruction-item__text {
    color: #17222b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.instruction-item__meta {
    color: #667480;
    font-size: 11px;
}

#link-msg {
    color: #2f6f58;
    font-size: 12px;
    margin-top: 4px;
}

.preset-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dde3dc;
}

.params,
.controls {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dde3dc;
}

.params-hint,
.bucket-hint {
    color: #667480;
    font-size: 11px;
}

.params-hint {
    margin-bottom: 10px;
}

.param-group {
    margin-bottom: 12px;
}

.param-group + .param-group {
    padding-top: 10px;
    border-top: 1px solid #edf0ec;
}

.param-group-title {
    margin-bottom: 6px;
    color: #667480;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.param-group-badge {
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #edf0ec;
    color: #75818b;
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
}

.param-group--night .param-label,
.param-group--night .param-value {
    color: #98a3ad;
}

.param-group--night input[type="range"] {
    opacity: 0.35;
    cursor: not-allowed;
}

.param-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.param-row-full {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.param-label {
    min-width: 0;
    color: #34424e;
    font-size: 12px;
}

.param-value {
    color: #17222b;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

input[type="range"] {
    width: 100%;
    accent-color: #2f6f58;
    cursor: pointer;
}


.param-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #34424e;
    font-size: 12px;
}

#elevation-panel {
    top: auto;
    right: 12px;
    bottom: 12px;
    height: auto;
}

#elevation-panel[hidden] {
    display: none;
}

.elevation-chart {
    display: block;
    width: 100%;
    height: 120px;
    overflow: visible;
}

.elevation-chart__area {
    fill: rgba(47, 111, 88, 0.16);
}

.elevation-chart__line {
    fill: none;
    stroke: #2f6f58;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.elevation-chart__label {
    fill: #667480;
    font-size: 10px;
    font-weight: 700;
}

.elevation-chart__label--end {
    text-anchor: end;
}
input[type="text"],
select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #c6cec7;
    border-radius: 6px;
    background: #ffffff;
    color: #1f2933;
    font-size: 12px;
}

.controls {
    display: grid;
    gap: 8px;
}

.controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #34424e;
    cursor: pointer;
    font-size: 12px;
}

.dot-tree,
.dot-accident,
.dot-crime,
.dot-lamp {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.dot-tree {
    background: #2f6f58;
}

.dot-accident {
    background: #c74e3f;
}

.dot-crime {
    background: #6d5aa8;
}

.dot-lamp {
    background: #e3a11b;
    box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.18) inset;
}

.marker-start,
.marker-end {
    width: 28px;
    height: 28px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(23, 34, 43, 0.35);
}

.marker-start {
    background: #2f6f58;
}

.marker-end {
    background: #c74e3f;
}

.instruction-marker {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #e3a11b;
    color: #17222b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(23, 34, 43, 0.35);
}

.instruction-marker:hover {
    transform: scale(1.08);
}

.tree-popup .maplibregl-popup-content {
    padding: 8px 10px;
    color: #17222b;
    font-size: 12px;
    line-height: 1.4;
}

#debug-panel {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 10;
    max-width: min(340px, calc(100vw - 24px));
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.18);
    font-size: 12px;
}

#debug-panel summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    color: #667480;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    list-style: none;
    text-transform: uppercase;
}

#debug-panel summary::before {
    content: ">";
    font-size: 10px;
}

#debug-panel[open] summary::before {
    transform: rotate(90deg);
}

#debug-panel pre,
#profile-json {
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    color: #24313d;
    font-size: 11px;
    line-height: 1.5;
}

#debug-panel pre {
    max-height: calc(100vh - 80px);
    padding: 0 10px 10px;
}

.profiles-layout {
    display: grid;
    grid-template-columns: 336px minmax(0, 1fr);
    gap: 16px;
}

.panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid #d8ded7;
    border-radius: 8px;
    background: #ffffff;
}

.panel h1 {
    margin-bottom: 6px;
}

.panel p {
    margin: 0 0 10px;
    color: #52616e;
}

.profile-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dde3dc;
}

.profile-btn {
    flex: 1 1 88px;
}

.status {
    min-height: 18px;
    margin-top: 8px;
    color: #52616e;
    font-size: 12px;
}

.status.ok {
    color: #2f6f58;
}

.status.error {
    color: #b42318;
}

#profile-json {
    min-height: calc(100vh - 148px);
    padding: 14px;
    border: 1px solid #d8ded7;
    border-radius: 8px;
    background: #ffffff;
}

.engine-diagram {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8ded7;
    border-radius: 8px;
    background: #ffffff;
}

.engine-route {
    position: relative;
    min-height: 92px;
    border-radius: 8px;
    overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M8 68 H34 C42 68 42 32 50 32 H92' fill='none' stroke='%232f6f58' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
            center / 100% 100% no-repeat,
        linear-gradient(90deg, rgba(47, 111, 88, 0.12), rgba(37, 99, 111, 0.1)),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(216, 222, 215, 0.35) 18px 19px);
}

.engine-point,
.engine-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 8px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(23, 34, 43, 0.24);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.engine-point--start {
    bottom: 29px;
    left: 6%;
    background: #2f6f58;
}

.engine-point--finish {
    top: 20px;
    right: 6%;
    background: #c74e3f;
}

.engine-node--snap {
    bottom: 29px;
    left: 24%;
    background: #25636f;
}

.engine-node--turn {
    top: 20px;
    left: 48%;
    background: #e3a11b;
    color: #17222b;
}

.engine-node--via {
    top: 20px;
    right: 24%;
    background: #6d5aa8;
}

.engine-legend,
.engine-flow {
    display: grid;
    gap: 10px;
}

.engine-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.engine-legend div {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 6px;
    background: #f6f7f3;
}

.engine-legend strong {
    color: #17222b;
    font-size: 12px;
}

.engine-legend span {
    color: #52616e;
    font-size: 12px;
}

.engine-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.engine-card {
    position: relative;
    padding-top: 40px;
}

.engine-card p {
    min-height: 0;
}

.engine-step {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #2f6f58;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

/* Street-level inspector (bench evaluation of guidance points on /demo) */
#street-panel {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 24px));
    height: min(440px, calc(100vh - 24px));
    padding: 12px;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.22);
    font-size: 13px;
}

#street-panel[hidden] {
    display: none;
}

body.street-open #instructions-panel {
    height: min(520px, calc(100vh - 488px));
    min-height: 150px;
}

.street-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.street-head .instruction-item__number {
    flex: none;
    margin-top: 1px;
}

.street-head__body {
    display: grid;
    flex: 1 1 auto;
    gap: 1px;
    min-width: 0;
}

.street-head__text {
    color: #17222b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.street-head__meta {
    color: #667480;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.street-head__nav {
    display: flex;
    flex: none;
    gap: 4px;
}

.street-head__nav .button {
    min-height: 26px;
    padding: 2px 9px;
    font-size: 14px;
    line-height: 1;
}

.street-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.street-tab {
    min-height: 26px;
    padding: 3px 10px;
    border: 1px solid #c6cec7;
    border-radius: 6px;
    background: #ffffff;
    color: #1f2933;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.street-tab:hover {
    background: #eef2ed;
}

.street-tab.active {
    border-color: #2f6f58;
    background: #eef6f1;
    color: #1d4636;
}

.street-tab--config {
    margin-left: auto;
    color: #667480;
    font-weight: 500;
}

.street-links {
    display: inline-flex;
    gap: 10px;
    margin-left: 6px;
    font-size: 12px;
}

.street-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #17222b;
}

#street-mly-viewer,
#street-gsv-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

#street-mly-viewer[hidden],
#street-gsv-frame[hidden],
.street-status[hidden],
.street-setup[hidden] {
    display: none;
}

.street-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #d4dbe2;
    font-size: 12px;
    text-align: center;
}

.street-setup {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    background: #ffffff;
}

.street-setup p {
    margin: 0;
    color: #46535f;
    font-size: 12px;
}

.street-setup__row {
    display: flex;
    gap: 6px;
}

.street-setup__row input {
    flex: 1 1 auto;
    min-width: 0;
}

.street-foot {
    min-height: 16px;
    margin-top: 6px;
    color: #667480;
    font-size: 11px;
}

@media (max-width: 860px) {
    .site-header__inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 0;
    }

    .site-nav {
        justify-content: flex-start;
    }
    .profiles-layout,
    .request-grid,
    .engine-flow,
    .engine-legend {
        grid-template-columns: 1fr;
    }

    #debug-panel {
        display: none;
    }
}

@media (max-width: 520px) {
    .site-header__inner,
    .page {
        width: min(100vw - 20px, 1120px);
    }

    .page {
        padding-top: 22px;
    }

    .doc-table,
    .doc-table tbody,
    .doc-table tr,
    .doc-table th,
    .doc-table td {
        display: block;
        width: 100%;
    }

    .doc-table th {
        padding-bottom: 2px;
        border-bottom: 0;
    }

    .doc-table td {
        padding-top: 2px;
    }

    #panel {
        inset: auto 10px 10px 10px;
        width: auto;
        max-height: 58vh;
    }

    #instructions-panel {
        inset: 10px 10px auto 10px;
        width: auto;
        height: 34vh;
        min-height: 180px;
    }

    #elevation-panel {
        inset: auto 10px calc(58vh + 18px) 10px;
        width: auto;
    }

    .param-row {
        grid-template-columns: minmax(0, 1fr) 84px 32px;
    }
}

@media (max-width: 520px) {
    #street-panel {
        inset: auto 0 0 0;
        z-index: 12;
        width: auto;
        height: 46vh;
        border-radius: 8px 8px 0 0;
    }
}

/* Field dogfooding app (/field) and plan editor (/field-plan) */
.field-body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #f6f7f3;
}

#field-map {
    position: absolute;
    inset: 0;
}

#field-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(31, 41, 51, 0.12);
    box-shadow: 0 6px 20px rgba(23, 34, 43, 0.12);
}

.field-bar__route {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #17222b;
}

#field-route-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-bar__status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.mode-badge {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: #3b82f6;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.queue-chip {
    color: #667480;
    font-size: 11px;
    font-weight: 600;
}

.queue-chip--pending {
    color: #b42318;
}

.field-fab {
    position: absolute;
    right: 14px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 10;
    width: 48px;
    height: 48px;
    border: 1px solid #c6cec7;
    border-radius: 50%;
    background: #ffffff;
    color: #46535f;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(23, 34, 43, 0.25);
}

.field-fab.active {
    border-color: #2f6f58;
    background: #eef6f1;
    color: #2f6f58;
}

.field-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #f6f7f3;
}

.field-overlay[hidden] {
    display: none;
}

.field-card {
    width: min(440px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.15);
}

.field-card h1 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #17222b;
}

.field-picker-list {
    margin: 12px 0 0;
    padding-left: 18px;
}

.field-picker-list li {
    margin-bottom: 6px;
}

.field-scrim {
    position: absolute;
    inset: 0;
    z-index: 14;
    background: rgba(23, 34, 43, 0.35);
}

.field-scrim[hidden] {
    display: none;
}

.field-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 78vh;
    overflow-y: auto;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 12px 12px 0 0;
    background: #ffffff;
    box-shadow: 0 -12px 40px rgba(23, 34, 43, 0.25);
}

.field-sheet[hidden] {
    display: none;
}

@media (min-width: 700px) {
    .field-sheet {
        left: 50%;
        right: auto;
        width: 480px;
        transform: translateX(-50%);
    }
}

.field-sheet__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.field-sheet__title {
    display: grid;
    gap: 2px;
    font-size: 14px;
    font-weight: 700;
    color: #17222b;
}

.field-sheet__meta {
    color: #667480;
    font-size: 11px;
    font-weight: 500;
}

.field-sheet textarea,
#plan-testers {
    width: 100%;
    padding: 8px;
    border: 1px solid #c6cec7;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

#plan-testers {
    width: min(280px, 100%);
}

.field-sheet__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.field-sheet__actions .button {
    min-height: 40px;
    padding: 8px 16px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid #c6cec7;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2933;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.chip.active {
    border-color: #2f6f58;
    background: #2f6f58;
    color: #ffffff;
}

.field-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #46535f;
    font-size: 12px;
}

.rubric {
    display: grid;
    gap: 10px;
}

.rubric__label {
    display: block;
    margin-bottom: 4px;
    color: #46535f;
    font-size: 12px;
    font-weight: 700;
}

.rubric__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.field-toast {
    position: absolute;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 30;
    transform: translateX(-50%);
    max-width: calc(100vw - 40px);
    padding: 8px 14px;
    border-radius: 999px;
    background: #17222b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(23, 34, 43, 0.3);
}

.field-toast[hidden] {
    display: none;
}

.instruction-marker.annotated {
    background: #2f6f58;
    color: #ffffff;
}

.plan-cell {
    min-width: 150px;
}

.plan-cell select {
    display: block;
    width: 100%;
    margin-bottom: 4px;
}

/* Street View viewpoint markers on the demo map (rays-outward = panorama) */
.street-pano-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #b83280;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(23, 34, 43, 0.45);
}

.street-pano-marker:hover {
    box-shadow: 0 0 0 4px rgba(184, 50, 128, 0.3);
}

.street-pano-marker.active {
    background: #2f6f58;
    box-shadow: 0 0 0 4px rgba(47, 111, 88, 0.35);
}

/* Camera position + view direction of the active street-level pano */
.street-view-cone {
    /* MapLibre rotates markers around transform-origin; pivot on the apex
       (= the camera position at the anchor), not the box center. */
    transform-origin: 50% 100%;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 30px solid rgba(59, 130, 246, 0.4);
    pointer-events: none;
}

.street-view-cone::after {
    content: "";
    position: absolute;
    left: -5px;
    top: -3px;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 1px 4px rgba(23, 34, 43, 0.4);
}

/* Static variant: shows a requested heading (Google embed has no live POV) */
.street-view-cone--static {
    border-top-color: rgba(184, 50, 128, 0.38);
}

.street-view-cone--static::after {
    background: #b83280;
}

/* Direction unknown: user rotated the embed; only the position dot is true */
.street-view-cone--unknown {
    border-top-color: transparent;
}

.street-body #street-reaim {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(23, 34, 43, 0.3);
}

.street-body #street-reaim[hidden] {
    display: none;
}

#street-gsv-pano {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#street-gsv-pano[hidden] {
    display: none;
}

.street-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

#street-quota {
    flex: none;
    color: #8a97a3;
    cursor: help;
}

/* Field review (/field-review): feedback overview + per-route map review */
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.panel-head h1 {
    margin: 0;
}

.review-route-list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.review-route__open {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px;
    border: 1px solid #c6cec7;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.review-route__open:hover {
    border-color: #2f6f58;
    background: #eef6f1;
}

.review-route__name {
    color: #17222b;
    font-size: 13px;
    font-weight: 700;
}

.review-route__meta {
    color: #667480;
    font-size: 11px;
}

.review-route__issues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.review-route__flag {
    color: #b42318;
    font-size: 11px;
    font-weight: 700;
}

.review-issue-chip {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f4e8e6;
    color: #8f3326;
    font-size: 10.5px;
    font-weight: 600;
}

.review-export,
.review-route-meta {
    color: #667480;
    font-size: 11.5px;
}

.review-ratings-table {
    font-size: 11px;
}

.review-ratings-table th,
.review-ratings-table td {
    padding: 4px 6px;
}

.review-negative {
    color: #b42318;
    font-weight: 700;
}

.review-walk-note {
    color: #46535f;
    font-style: italic;
}

#review-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 24px));
    padding: 12px;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.18);
}

#review-panel[hidden] {
    display: none;
}

#review-panel h2 {
    margin: 0 0 2px;
    font-size: 14px;
}

body.street-open #review-panel {
    max-height: min(560px, calc(100vh - 488px));
}

.review-annotations {
    overflow-y: auto;
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.review-node {
    display: grid;
    gap: 6px;
}

.review-node__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #c6cec7;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #17222b;
}

.review-node__head:hover {
    background: #eef2ed;
}

.review-node__head.active {
    border-color: #2f6f58;
    background: #eef6f1;
}

.review-entry {
    display: grid;
    gap: 4px;
    margin-left: 8px;
    padding: 6px 8px;
    border-left: 2px solid #e3e7e2;
}

.review-entry__who {
    color: #667480;
    font-size: 11px;
    font-weight: 600;
}

.review-entry__issues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.review-entry__note {
    color: #46535f;
    font-size: 12px;
    font-style: italic;
}

.instruction-marker.review-flagged {
    background: #c74e3f;
    color: #ffffff;
}

.review-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #17222b;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 15px;
}

/* Field app: walk window + compare step (pair docs, decisions D5/D6) */
.field-window {
    flex: none;
    color: #667480;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.compare-modes {
    display: grid;
    gap: 6px;
}

.compare-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #46535f;
    font-size: 12px;
    font-weight: 600;
}

.compare-mode__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mode-color, #3b82f6);
}

.compare-mode__name {
    color: var(--mode-color, #17222b);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.compare-mode__stats {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.compare-mode--active {
    color: #17222b;
}

.compare-mode--active .compare-mode__stats {
    font-weight: 700;
}

/* Challenger nudge under "better option missing" (decision D9) */
.field-sheet__hint {
    margin: 0;
    color: #2f6f58;
    font-size: 12px;
    font-weight: 600;
}

.field-sheet__hint[hidden] {
    display: none;
}

/* Field plan: pair multiplicity badge + walk-window control (D5/D10) */
.plan-cell__pair {
    display: flex;
    align-items: center;
    gap: 4px;
}

.plan-cell__pair select {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.pair-multi-badge {
    flex: none;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e8eef4;
    color: #2c5d8f;
    font-size: 10.5px;
    font-weight: 700;
    cursor: default;
}

.pair-multi-badge[hidden] {
    display: none;
}

.plan-cell .plan-cell__pair {
    margin-bottom: 4px;
}

.plan-window__custom {
    display: flex;
    gap: 4px;
}

.plan-window__custom[hidden] {
    display: none;
}

.plan-window__custom input {
    flex: 1;
    min-width: 0;
    font-size: 12px;
}

/* Demo: product presets, advanced-weights disclosure, challenger mode, pair save */

.preset-fallback {
    grid-column: 1 / -1;
    color: #667480;
    font-size: 12px;
}

.advanced-weights {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dde3dc;
}

.advanced-weights > summary {
    cursor: pointer;
    color: #667480;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
}

.advanced-weights[open] > summary {
    margin-bottom: 10px;
}

.challenger-banner {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #d9b23a;
    border-radius: 6px;
    background: #fdf6dd;
    color: #6d5410;
    font-size: 12px;
}

.marker-via {
    width: 18px;
    height: 18px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #e3a11b;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(23, 34, 43, 0.35);
}

.field-save-dialog {
    min-width: 300px;
    padding: 16px;
    border: 1px solid #dde3dc;
    border-radius: 8px;
}

.field-save-dialog::backdrop {
    background: rgba(23, 34, 43, 0.45);
}

.field-save-dialog h2 {
    margin: 0 0 4px;
    font-size: 15px;
}

.field-save-hint {
    margin: 0 0 12px;
    color: #667480;
    font-size: 12px;
}

.field-save-row {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
}

.field-save-row > span {
    display: block;
    margin-bottom: 3px;
    color: #667480;
    font-weight: 600;
}

.field-save-row input,
.field-save-row select {
    width: 100%;
    box-sizing: border-box;
}

/* Field review: pair-health table, triage queue, belief panel (D7–D9) */
#panel.panel--wide {
    width: min(960px, calc(100vw - 24px));
}

.review-pairs-table {
    font-size: 11px;
}

.review-pairs-table th,
.review-pairs-table td {
    padding: 5px 6px;
    vertical-align: top;
}

.review-pairs-table td {
    font-variant-numeric: tabular-nums;
}

th.review-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.review-sortable:hover {
    color: #17222b;
}

.review-pair-open {
    padding: 0;
    border: none;
    background: none;
    color: #2f6f58;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.review-pair-open:hover {
    text-decoration: underline;
}

.review-pair-meta {
    color: #667480;
    font-size: 10.5px;
}

.review-flag-chip {
    display: inline-block;
    margin: 0 3px 3px 0;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: #f4e8e6;
    color: #8f3326;
}

.review-flag-chip--similar {
    background: #ece8f4;
    color: #54468a;
}

.review-flag-chip--length,
.review-flag-chip--speed {
    background: #f4efe0;
    color: #7a5d18;
}

.review-choice {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
}

.review-challenger-row td {
    padding-left: 18px;
    background: #f7f9f7;
    color: #667480;
    font-size: 10.5px;
}

.review-triage {
    margin: 10px 0;
    border: 1px solid #c6cec7;
    border-radius: 8px;
    padding: 6px 10px;
}

.review-triage summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #17222b;
}

.review-triage__list {
    margin: 6px 0 2px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.review-triage__open {
    padding: 0;
    border: none;
    background: none;
    color: #46535f;
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.review-triage__open:hover {
    color: #2f6f58;
    text-decoration: underline;
}

#review-overview h2 {
    margin: 14px 0 4px;
    font-size: 14px;
}

.review-surface {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 4px;
    background: #e4e9ee;
    color: #3c4a57;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.review-surface--data,
.review-surface--data-or-snapping {
    background: #e3eef8;
    color: #2c5d8f;
}

.review-surface--weights,
.review-surface--engine-graph,
.review-surface--speed-model {
    background: #ece8f4;
    color: #54468a;
}

.review-surface--attribute-gap {
    background: #f4efe0;
    color: #7a5d18;
}

.review-surface--guidance {
    background: #e6f2ec;
    color: #2f6f58;
}

.review-surface-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.review-surface-filter:empty {
    display: none;
}

.review-mode-tabs {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}

.mode-tab {
    flex: 1;
    padding: 5px 0;
    border: 1px solid #c6cec7;
    border-radius: 8px;
    background: #ffffff;
    color: var(--mode-color, #46535f);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.mode-tab.active {
    border-color: var(--mode-color, #2f6f58);
    background: var(--mode-color, #2f6f58);
    color: #ffffff;
}

#review-compare h3 {
    margin: 12px 0 4px;
    font-size: 13px;
}

#review-compare .review-entry {
    border-top: none;
    padding: 6px 0;
    border-bottom: 1px solid #e4e9e4;
}

.review-reconstruct {
    display: inline-block;
    margin-top: 4px;
    color: #2f6f58;
    font-size: 11px;
    font-weight: 700;
}

.review-belief {
    margin-top: 6px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f2f5f2;
    border: 1px solid #dde4dd;
}

.review-belief__title {
    margin-bottom: 4px;
    color: #667480;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.review-belief__grid {
    display: grid;
    grid-template-columns: repeat(3, auto 1fr);
    gap: 2px 8px;
    margin: 0;
}

.review-belief__grid dt {
    color: #667480;
    font-size: 10.5px;
}

.review-belief__grid dd {
    margin: 0;
    color: #17222b;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.copy-chip {
    margin-top: 5px;
    padding: 2px 8px;
    border: 1px dashed #aab6ab;
    border-radius: 999px;
    background: #ffffff;
    font-size: 10.5px;
    cursor: copy;
}

.copy-chip code {
    background: none;
    padding: 0;
}

.copy-chip:hover {
    border-color: #2f6f58;
}

.copy-chip.copied {
    border-color: #2f6f58;
    background: #e6f2ec;
}

.copy-chip.copied code::after {
    content: " ✓ copied";
    color: #2f6f58;
    font-weight: 700;
}

/* ---------------------------------------------------------------- bench */

#bench-map {
    position: absolute;
    inset: 0;
}

#bench-rail {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    width: min(300px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.22);
    font-size: 13px;
}

#bench-status {
    color: #46535f;
    margin-bottom: 10px;
}

.bench-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.bench-field span {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #667480;
}

.bench-field select {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid #d8ded7;
    border-radius: 5px;
    background: #fff;
}

.bench-cmp {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #e2e7df;
    border-radius: 6px;
    background: #fbfcfa;
}

.bench-cmp__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3px 0;
}

.bench-cmp__row--big {
    font-size: 15px;
    font-weight: 700;
    color: #17222b;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e2e7df;
}

.bench-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}

.bench-swatch--ours {
    background: #1d6fb8;
}

.bench-swatch--google {
    background: #f0a32a;
}

/* Key gate / fatal overlay. */
.bench-gate {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 34, 43, 0.55);
    padding: 16px;
}

.bench-gate[hidden] {
    display: none;
}

.bench-gate__card {
    width: min(420px, 100%);
    padding: 22px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(23, 34, 43, 0.35);
}

.bench-gate__card h2 {
    margin: 0 0 8px;
    color: #17222b;
}

.bench-gate__card p {
    color: #46535f;
    margin: 0 0 12px;
}

.bench-gate__card input {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px solid #d8ded7;
    border-radius: 6px;
}

/* Imagery controls (rail) */
.bench-imagery-ctl {
    margin: 10px 0;
    padding: 8px 10px 10px;
    border: 1px solid #e2e7df;
    border-radius: 6px;
}

.bench-imagery-ctl legend {
    padding: 0 4px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #667480;
}

.bench-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}

.bench-radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 8px;
}

.bench-radio-row > span {
    flex: 0 0 100%;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #667480;
}

.bench-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Inline Mapillary viewer panel — Mapillary disabled for now, kept for later.
#bench-imagery {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 12;
    width: min(440px, 46vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(23, 34, 43, 0.22);
}

#bench-imagery[hidden] {
    display: none;
}

.bench-imagery__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e7df;
    font-weight: 700;
    color: #17222b;
}

#bench-mly-viewer {
    flex: 1 1 auto;
    min-height: 0;
    background: #11171c;
}
*/

.help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-left: 4px;
    border: 1px solid #9aa8a0;
    border-radius: 50%;
    color: #46535f;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
}

.help-tip__body {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: none;
    width: min(280px, calc(100vw - 48px));
    padding: 8px 10px;
    border-radius: 6px;
    background: #17222b;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    transform: translateX(-50%);
    box-shadow: 0 10px 28px rgba(23, 34, 43, 0.24);
}

.help-tip:hover .help-tip__body,
.help-tip:focus .help-tip__body {
    display: block;
}