/* survey.det.land stylesheet.
*
* One file by deliberate choice — kept under a single download so
* cross-page navigation reuses the cached payload and we don't have
* to maintain per-page sets. ~5700 lines feels long but is
* navigable via the table of contents below; jump to a section with
* Cmd+F on the marker line.
*
* If/when this gets painful enough to split, the natural shape is
* one file per logical SECTION below (auth.css, runner.css,
* launcher.css, profile.css, dashboard.css, welcome.css,
* builder.css, …) concatenated by a small deploy-time script so the
* browser still gets one file. Don't split-and-load-separately —
* we'd lose the cache win + add load-order coupling.
*
* ── TABLE OF CONTENTS ──────────────────────────────────────────
* Auth + chrome
* L0001 Login overlay
* Survey runtime (/survey)
* L0077 Runner panel
* L0407 Phase B Mapillary-centered layout
* L2112 Mapillary sequence-controls restyle
* L2192 Image-attribution caption
* L2631 Phase Z right-column split
* L2756 Per-parcel toast
* L2790 Survey-completion card
* Session launcher (/survey runtime modal)
* L0656 Session launcher
* Survey builder (/surveys/new)
* L1268 Survey builder modal
* L1833 Builder question cards
* L5744 Survey-new page shell
* Survey runtime page shell (/survey)
* L5824 Survey runtime page shell
* Profile (/profile)
* L2870 Profile page core
* L3567 Profile orgs section + create modal
* Welcome (/welcome)
* L3285 Welcome landing page
* Org dashboard (/orgs/{id})
* L3793 Org dashboard
* L3830 Invite UI (Slice 5)
* L3860 Per-member admin controls (Slice 6a)
* L3912 Inline edit affordances (Slice 6b)
* Admin console (/admin)
* L4175 Admin console
* Per-survey dashboard (/surveys/{id})
* L4343 Per-survey dashboard
* L4428 Activity feed
* L4696 Edit modal
* Session dashboard (/sessions/{id})
* L5159 Session dashboard
*
* Line numbers above are approximate (each Slice add nudges them by
* a few lines). Search for the section banner comment ("/* ── X ──")
* for an exact jump.
*/
/* ── Login overlay ───────────────────────────────────────────────────── */
.survey-login-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(13, 17, 23, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.25s ease;
}
.survey-login-overlay.hidden {
opacity: 0;
pointer-events: none;
/* Slice 8 — also set visibility: hidden so the overlay is
definitively gone even when a CSS transition gets pinned to
its FROM frame by compositor contention (seen on
/surveys/new where the MapLibre boot was racing the
overlay's opacity transition). Visibility is non-animatable
and applies instantly. */
visibility: hidden;
}
/* SPA opt-out: page modules that show their own sign-in UI inline
* (e.g., /welcome with its wordmark + "Continue with X" buttons)
* add `spa-suppress-login-overlay` to on mount and remove
* it on teardown. CSS force-hides the shared overlay regardless of
* auth state so the page's inline UI isn't covered. */
body.spa-suppress-login-overlay #login-overlay {
display: none !important;
}
.survey-login-card {
width: min(420px, 90vw);
background: #fff;
border-radius: 12px;
padding: 28px 28px 22px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
text-align: center;
box-sizing: border-box;
}
.survey-login-card h1 {
margin: 0 0 6px;
font-size: 22px;
/* WCAG 2.1 AA: #0066cc on white is ~5.1:1 in theory — clears
* the 4.5:1 spec for normal text. axe-core under-reports the
* contrast (~4.45:1) because the parent overlay's
* `backdrop-filter: blur(6px)` confuses its pixel sampler.
* font-weight: 700 makes this qualify as "large bold text"
* (16.5pt ≥ 14pt bold) which has a 3:1 threshold instead of
* 4.5:1, so axe-core's computed value passes either way.
* The visual weight also reads better as a wordmark. */
color: #0066cc;
font-weight: 700;
}
.survey-login-card p {
margin: 0 0 20px;
color: #5a6470;
font-size: 14px;
}
.survey-login-btn {
display: block;
width: 100%;
padding: 11px 14px;
margin: 8px 0;
border: 1px solid #d0d7de;
border-radius: 6px;
background: #fff;
color: #1a1f24;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
.survey-login-btn:hover:not([disabled]) {
background: #f6f8fa;
border-color: #0080ff;
}
.survey-login-btn[disabled] {
cursor: not-allowed;
opacity: 0.6;
}
.survey-login-status {
margin: 12px 0 0;
min-height: 18px;
font-size: 12px;
color: #8893a0;
}
/* ── Runner panel (mounts inside #survey-runner above #panel-chip-row) ── */
.survey-runner-header {
/* Position:relative so the absolutely-positioned flag icon
* anchors to the header's top-right corner regardless of
* which other elements (eyebrow / title / progress / banners)
* render inside. */
position: relative;
padding: 12px 16px 8px;
border-bottom: 1px solid #eee;
}
.survey-runner-eyebrow {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7682;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Consolidated meta line — replaces the eyebrow + survey-title
* + boundary-in-progress trio with one compact "SURVEYING · survey ·
* boundary" string. Reads as a small, dim header above the parcel
* address. Leaves room for the title to dominate visually. */
.survey-runner-meta {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7682;
/* Reserve right gutter for the flag icon (36px wide + 8px from
* edge + 8px inner gap = 52px); otherwise long meta strings
* collide with the icon on narrow phones. */
padding-right: 52px;
line-height: 1.4;
/* Truncate cleanly on very narrow phones rather than wrap into
* a multi-line header. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* M1 follow-up: flag affordance is an icon button in the runner
* header's top-right corner. Visual language mirrors the Mapillary
* toolbar buttons (.mapillary-toolbar-btn family):
* default → muted grey bg, neutral icon
* .is-on → solid det.land-blue fill, white icon (flag panel open)
* hover → subtle bg shift
* Keeps the surveyor reading tool-state at a glance the same way
* across both rails. */
.survey-runner-flag-icon {
position: absolute;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eef0f3;
border: 1px solid rgba(0, 0, 0, 0.06);
color: #4a5260;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
z-index: 2;
}
.survey-runner-flag-icon:hover {
background: #e3e6ea;
}
.survey-runner-flag-icon.is-on {
background: #0080ff;
border-color: #0080ff;
color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 128, 255, 0.35);
}
.survey-runner-flag-icon.is-on:hover {
background: #0070e0;
border-color: #0070e0;
}
.survey-runner-flag-icon:focus-visible {
outline: 2px solid #0080ff;
outline-offset: 2px;
}
@media (max-width: 768px), (max-height: 600px) {
/* Bump to 44×44 hit target on touch devices per WCAG 2.1 AA. */
.survey-runner-flag-icon {
width: 44px;
height: 44px;
font-size: 18px;
/* M6: drag-handle bar occupies the top 24px of the sheet —
* shift the flag down so it sits in the header proper
* rather than overlapping the grabber. */
top: 32px;
}
}
.survey-flag-panel {
padding: 4px 0;
}
.survey-flag-title {
font-size: 14px;
font-weight: 600;
color: #1a1f24;
margin-bottom: 12px;
}
.survey-flag-reasons {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.survey-flag-reason {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #1a1f24;
cursor: pointer;
}
.survey-flag-note-label {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
font-size: 12px;
color: #6b7682;
}
.survey-flag-note-label textarea {
font: inherit;
font-size: 13px;
color: #1a1f24;
padding: 6px 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
resize: vertical;
}
.survey-flag-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
align-items: center;
}
.survey-btn--flag {
background: #dc2626;
color: white;
border-color: #b91c1c;
}
.survey-btn--flag:hover { background: #b91c1c; }
.survey-btn--flag:disabled { opacity: 0.6; cursor: wait; }
body.theme-dark .survey-runner-flag-btn {
border-color: #b91c1c;
color: #fca5a5;
}
body.theme-dark .survey-runner-flag-btn:hover {
background: rgba(220, 38, 38, 0.1);
}
body.theme-dark .survey-flag-title { color: #e6eaee; }
body.theme-dark .survey-flag-reason { color: #e6eaee; }
body.theme-dark .survey-flag-note-label textarea {
background: #1c2634;
border-color: #3b454f;
color: #e6eaee;
}
.survey-runner-title {
margin: 2px 0 4px;
font-size: 18px;
font-weight: 600;
color: #1a1f24;
}
.survey-runner-survey {
font-size: 13px;
color: #5a6470;
}
.survey-runner-body {
padding: 10px 14px;
}
.survey-question {
background: #f6f8fa;
border: 1px solid #e1e4e8;
border-radius: 8px;
padding: 10px 12px;
}
.survey-question-prompt {
font-size: 15px;
font-weight: 500;
color: #1a1f24;
margin-bottom: 8px;
line-height: 1.35;
}
.survey-helper {
font-size: 12px;
color: #6b7682;
margin-bottom: 10px;
font-style: italic;
}
.survey-answer-row {
display: flex;
gap: 8px;
}
/* image_annotation question — drawn polygons + tag picker */
.survey-annotation-control {
display: flex;
flex-direction: column;
gap: 10px;
}
.survey-annotation-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.survey-annotation-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: #f3f5f7;
border-radius: 6px;
font-size: 13px;
}
.survey-annotation-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: var(--anno-hue, #2563eb);
color: white;
font-weight: 600;
font-size: 12px;
}
.survey-annotation-points {
color: #6b7682;
font-size: 12px;
flex: 1;
}
.survey-annotation-remove {
border: none;
background: transparent;
color: #b91c1c;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 2px 6px;
border-radius: 4px;
}
.survey-annotation-remove:hover:not([disabled]) { background: #fee2e2; }
.survey-annotation-empty {
color: #6b7682;
font-size: 12px;
font-style: italic;
padding: 6px 10px;
}
.survey-annotation-drawing {
padding: 8px 10px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 6px;
color: #78350f;
font-size: 13px;
line-height: 1.4;
}
.survey-annotation-drawing strong { font-weight: 700; }
.survey-annotation-add {
display: flex;
gap: 8px;
align-items: center;
}
.survey-annotation-add select,
.survey-annotation-add .survey-annotation-tag-input {
flex: 1;
min-width: 0;
padding: 8px 10px;
border: 1px solid #d0d7de;
border-radius: 6px;
background: white;
font-size: 13px;
font-family: inherit;
color: inherit;
}
.survey-annotation-add .survey-annotation-tag-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.survey-btn--secondary {
background: #f3f5f7;
}
body.theme-dark .survey-annotation-row { background: #1c252e; }
body.theme-dark .survey-annotation-empty,
body.theme-dark .survey-annotation-points { color: #9aa6b2; }
body.theme-dark .survey-annotation-add select,
body.theme-dark .survey-annotation-add .survey-annotation-tag-input {
background: #0f1620;
border-color: #2a3340;
color: #e6eaee;
}
body.theme-dark .survey-annotation-drawing {
background: #3b2f0c;
border-color: #6b531f;
color: #fde68a;
}
body.theme-dark .survey-btn--secondary { background: #1c252e; }
.survey-answer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.survey-btn {
flex: 1;
padding: 9px 12px;
border: 1px solid #d0d7de;
border-radius: 6px;
background: #fff;
color: #1a1f24;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
.survey-btn:hover:not([disabled]) {
background: #f0f4f8;
border-color: #0080ff;
color: #0080ff;
}
.survey-btn[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
/* Slice F: highlight the previously-selected value when editing an
* already-answered question, so the surveyor sees what they had
* chosen at a glance even before deciding to revise it. */
.survey-btn.is-current {
background: #eef4fc;
border-color: #2563eb;
color: #1d4fd1;
font-weight: 600;
}
.survey-btn.is-current:hover:not([disabled]) {
background: #dbe7fa;
border-color: #1d4fd1;
color: #1d4fd1;
}
body.theme-dark .survey-btn.is-current {
background: #1c2a3d;
border-color: #4493d6;
color: #cfe4f7;
}
body.theme-dark .survey-btn.is-current:hover:not([disabled]) {
background: #233a52;
border-color: #69b3ee;
color: #ffffff;
}
/* multi_choice answer control: a stack of check-all-that-apply options,
* styled to match the .survey-btn chips, plus a submit below. */
.survey-multi-form { display: flex; flex-direction: column; gap: 8px; }
.survey-answer-checks { display: flex; flex-direction: column; gap: 8px; }
.survey-check {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid #d0d7de;
border-radius: 6px;
background: #fff;
color: #1a1f24;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.survey-check:hover { background: #f0f4f8; border-color: #0080ff; }
.survey-check input { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; flex: none; }
.survey-check:has(input:checked) {
background: #eef4fc;
border-color: #2563eb;
color: #1d4fd1;
font-weight: 600;
}
body.theme-dark .survey-check {
background: #2a333c;
color: #e6eaee;
border-color: #3b454f;
}
body.theme-dark .survey-check:hover { background: #34404a; border-color: #4493d6; }
body.theme-dark .survey-check:has(input:checked) {
background: #1c2a3d;
border-color: #4493d6;
color: #cfe4f7;
}
/* Slice F: edit-banner shown at the top of the runner when the
* surveyor is revisiting an already-answered question, with a
* Cancel button to bail out without changing anything. */
.survey-edit-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
margin-bottom: 12px;
background: var(--color-warning-bg);
border: 1px solid var(--color-warning-border);
color: var(--color-warning-fg);
border-radius: 6px;
font-size: 13px;
}
/* Dark variant inherits automatically via the --color-warning-*
* tokens defined in theme.css. No body.theme-dark override needed. */
/* Slice F: review-state action row hosts both Edit-previous and
* Submit buttons side-by-side. */
.survey-review-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 12px;
}
.survey-back-row {
margin-top: 8px;
}
/* Slice F: per-row Edit affordance in the answers summary. The
* summary used to be display-only — now each row has a small Edit
* button that flips the runner into edit mode for that question. */
.survey-answers-summary-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin: 4px 0;
}
.survey-answers-summary-text { flex: 1; min-width: 0; }
.survey-answer-edit {
flex-shrink: 0;
padding: 3px 10px;
background: transparent;
border: 1px solid #d0d7de;
border-radius: 4px;
color: #2563eb;
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, border-color 0.15s;
}
.survey-answer-edit:hover:not([disabled]) {
background: #eef4fc;
border-color: #2563eb;
}
.survey-answer-edit[disabled] { opacity: 0.5; cursor: not-allowed; }
body.theme-dark .survey-answer-edit {
border-color: #2f3a44;
color: #69b3ee;
}
body.theme-dark .survey-answer-edit:hover:not([disabled]) {
background: #1c2a3d;
border-color: #4493d6;
}
.survey-text-form { display: flex; flex-direction: column; gap: 8px; }
.survey-text-form textarea {
width: 100%;
padding: 8px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
box-sizing: border-box;
resize: vertical;
}
.primary-btn {
padding: 10px 14px;
border: 1px solid #0080ff;
background: #0080ff;
color: #fff;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
}
.primary-btn:hover:not([disabled]) { background: #0070e0; }
.primary-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.link-btn {
background: none;
border: none;
padding: 0;
color: #0080ff;
cursor: pointer;
text-decoration: underline;
font: inherit;
}
.survey-state-card {
background: #f6f8fa;
border: 1px solid #e1e4e8;
border-radius: 8px;
padding: 14px;
}
.survey-state-card.success {
background: #e8f5ee;
border-color: #a3d3b6;
color: #0a4d2a;
}
.survey-state-card strong { display: block; margin-bottom: 6px; }
.survey-state-card p { margin: 0 0 12px; color: #5a6470; }
/* Edit-prune confirm — shown when re-answering an earlier question lands on a
* different branch and would clear later answers (A: edit invalidates
* downstream). Amber to flag the destructive clear. */
.survey-prune-confirm {
background: #fff8ec;
border: 1px solid #f0c674;
border-radius: 8px;
padding: 14px;
}
.survey-prune-confirm-title { font-weight: 700; margin-bottom: 6px; color: #7a4f01; }
.survey-prune-confirm-msg { margin: 0 0 12px; color: #5a6470; font-size: 0.92em; line-height: 1.45; }
.survey-prune-confirm-actions { display: flex; gap: 8px; }
.survey-prune-confirm-actions button { flex: 1; }
.secondary-btn {
background: #fff;
color: #1a2a3a;
border: 1px solid #c8cdd3;
border-radius: 8px;
padding: 10px 14px;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.secondary-btn:hover:not([disabled]) { background: #f1f3f5; }
.secondary-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
body.theme-dark .survey-prune-confirm { background: #2a2410; border-color: #6b5a1f; }
body.theme-dark .survey-prune-confirm-title { color: #f0c674; }
body.theme-dark .secondary-btn { background: #1b2430; color: #e6eaee; border-color: #3a4654; }
body.theme-dark .secondary-btn:hover:not([disabled]) { background: #243041; }
/* Multi-year Slice C — prior-year recap card.
*
* Shown above the question runner when a session is multi-year and a
* prior-year response exists for the active parcel + walking year.
* Two-action layout: "No change" (primary, one-click clone+submit)
* and "Yes, re-answer" (secondary, dismisses the card and reveals
* the question runner). */
.survey-runner-recap {
background: #eef4fc;
border: 1px solid #c5d8ee;
border-left: 4px solid #2563eb;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 12px;
font-size: 13px;
color: #1a2a3a;
}
.survey-runner-recap-eyebrow {
font-size: 12px;
color: #4b5560;
margin-bottom: 6px;
}
.survey-runner-recap-eyebrow strong {
color: #1a2a3a;
font-weight: 700;
}
.survey-runner-recap-answers {
list-style: none;
margin: 0 0 10px;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.survey-runner-recap-answers li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 3px 0;
border-bottom: 1px dashed rgba(37, 99, 235, 0.18);
}
.survey-runner-recap-answers li:last-child { border-bottom: none; }
.survey-runner-recap-answers .survey-runner-recap-prompt {
color: #4b5560;
flex: 1;
}
.survey-runner-recap-answers .survey-runner-recap-value {
color: #1a2a3a;
font-weight: 600;
}
.survey-runner-recap-empty {
color: #6b7682;
font-style: italic;
margin-bottom: 12px;
}
.survey-runner-recap-question {
margin: 0 0 10px;
font-size: 14px;
font-weight: 600;
color: #1a2a3a;
text-align: center;
}
.survey-runner-recap-actions {
display: flex;
gap: 8px;
justify-content: center;
}
/* Prior-year answers, now collapsed below the buttons (B: buttons-first). */
.survey-runner-recap-details {
margin-top: 10px;
border-top: 1px solid rgba(37, 99, 235, 0.18);
padding-top: 8px;
}
.survey-runner-recap-details > summary {
cursor: pointer;
font-size: 12px;
color: #5a6470;
list-style: revert;
}
.survey-runner-recap-details[open] > summary { margin-bottom: 6px; }
body.theme-dark .survey-runner-recap-details { border-top-color: rgba(120,160,230,0.25); }
body.theme-dark .survey-runner-recap-details > summary { color: #9aa6b2; }
/* C — dataset-mode quick-fill card on "Something changed". */
.survey-quickfill {
background: #eef6ff;
border: 1px solid #b6d4f5;
border-radius: 8px;
padding: 14px;
}
.survey-quickfill-eyebrow {
font-size: 11px;
font-weight: 700;
color: #1971c2;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 8px;
}
.survey-quickfill-stat { font-size: 12px; color: #5a6470; margin: 6px 0 12px; text-align: center; }
.survey-quickfill-actions { display: flex; flex-direction: column; gap: 8px; }
body.theme-dark .survey-quickfill { background: #14233a; border-color: #2f4a6b; }
body.theme-dark .survey-quickfill-eyebrow { color: #6ab0f3; }
body.theme-dark .survey-quickfill-stat { color: #9aa6b2; }
.survey-runner-recap-btn {
padding: 8px 14px;
border-radius: 6px;
border: 1px solid #c5d8ee;
background: #fff;
color: #1a2a3a;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.survey-runner-recap-btn:hover:not([disabled]) {
background: #f3f5f7;
}
.survey-runner-recap-btn--no-change {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
.survey-runner-recap-btn--no-change:hover:not([disabled]) { background: #1d4fd1; }
.survey-runner-recap-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
body.theme-dark .survey-runner-recap {
background: #1c2a3d;
border-color: #2c3e57;
border-left-color: #4493d6;
color: #e6eaee;
}
body.theme-dark .survey-runner-recap-eyebrow { color: #9aa6b2; }
body.theme-dark .survey-runner-recap-eyebrow strong { color: #e6eaee; }
body.theme-dark .survey-runner-recap-answers li {
border-bottom-color: rgba(68, 147, 214, 0.20);
}
body.theme-dark .survey-runner-recap-answers .survey-runner-recap-prompt { color: #9aa6b2; }
body.theme-dark .survey-runner-recap-answers .survey-runner-recap-value { color: #e6eaee; }
body.theme-dark .survey-runner-recap-question {
color: #e6eaee;
border-top-color: rgba(68, 147, 214, 0.20);
}
body.theme-dark .survey-runner-recap-btn {
background: #1c252e;
border-color: #2c3e57;
color: #e6eaee;
}
body.theme-dark .survey-runner-recap-btn:hover:not([disabled]) { background: #2a3340; }
body.theme-dark .survey-runner-recap-btn--no-change { background: #4493d6; border-color: #4493d6; color: #fff; }
body.theme-dark .survey-runner-recap-btn--no-change:hover:not([disabled]) { background: #3478b8; }
/* Slice H (revised): no-imagery years auto-skip silently — no card
* needed. The viewer's date stamp + a brief toast convey the skip.
* The dropped card classes are intentionally not preserved as a
* stub. */
.survey-answers-summary {
margin-top: 14px;
padding: 10px;
background: #fff;
border: 1px solid #eee;
border-radius: 6px;
font-size: 13px;
}
.survey-answers-summary summary {
cursor: pointer;
color: #5a6470;
font-weight: 500;
}
.survey-answers-summary ul {
margin: 8px 0 0;
padding-left: 18px;
color: #1a1f24;
}
.survey-answers-summary li { margin: 4px 0; }
.survey-photo-tally {
margin-top: 6px;
font-size: 12px;
color: #6b7682;
}
/* Property-history timeline (runner context). A clock icon in the header
* (mirrors the flag icon) drops this panel down over the body; lazy-loaded
* + cached on first open. */
.survey-runner-timeline-icon {
position: absolute;
top: 8px;
right: 52px; /* left of the flag icon (8 + 36 + 8) */
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eef0f3;
border: 1px solid rgba(0, 0, 0, 0.06);
color: #4a5260;
border-radius: 6px;
cursor: pointer;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
z-index: 2;
}
.survey-runner-timeline-icon svg { width: 19px; height: 19px; }
.survey-runner-timeline-icon:hover { background: #e3e6ea; }
.survey-runner-timeline-icon.is-on {
background: #0080ff;
border-color: #0080ff;
color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 128, 255, 0.35);
}
.survey-runner-timeline-icon:focus-visible { outline: 2px solid #0080ff; outline-offset: 2px; }
@media (max-width: 768px), (max-height: 600px) {
.survey-runner-timeline-icon { width: 44px; height: 44px; top: 32px; right: 60px; }
.survey-runner-timeline-icon svg { width: 22px; height: 22px; }
}
.survey-runner-timeline-dropdown {
position: absolute;
top: 100%;
left: 8px;
right: 8px;
margin-top: -4px;
z-index: 6;
background: #fff;
border: 1px solid #e1e4e8;
border-radius: 0 0 10px 10px;
box-shadow: 0 12px 26px rgba(20, 30, 45, 0.20);
max-height: 60vh;
overflow-y: auto;
padding: 10px 12px 12px;
}
.survey-runner-timeline-dhead {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #8a96a3;
margin-bottom: 8px;
}
.survey-runner-timeline-close {
border: none; background: transparent; font-size: 18px; line-height: 1;
color: #98a3b0; cursor: pointer; padding: 0 2px;
}
.survey-runner-timeline-note { font-size: 12.5px; color: #8a96a3; padding: 4px 0 6px; }
.survey-runner-timeline-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.survey-runner-timeline-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; padding: 2px 8px;
border-radius: 999px; background: #f1f4f8; color: #3b4654;
}
.survey-runner-timeline-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.survey-runner-timeline-feed { list-style: none; margin: 0; padding: 0; position: relative; }
.survey-runner-timeline-feed::before {
content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: #eef1f4;
}
.survey-runner-timeline-row {
position: relative; padding: 6px 0 6px 22px; cursor: pointer;
display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline;
}
.survey-runner-timeline-row + .survey-runner-timeline-row { border-top: 1px solid #f4f6f8; }
.survey-runner-timeline-node {
position: absolute; left: 1px; top: 10px; width: 11px; height: 11px;
border-radius: 50%; border: 2px solid #fff;
}
.survey-runner-timeline-yr { font-size: 11px; font-weight: 700; color: #98a3b0; }
.survey-runner-timeline-label { font-size: 13px; font-weight: 600; color: #1a1f24; line-height: 1.25; }
.survey-runner-timeline-detail {
display: none; grid-column: 2; font-size: 12px; color: #5b6672; line-height: 1.35; margin-top: 3px;
}
.survey-runner-timeline-row.is-open .survey-runner-timeline-detail { display: block; }
.survey-runner-timeline-more {
margin-top: 8px; width: 100%; text-align: center; background: #f1f4f8; border: none;
border-radius: 6px; padding: 7px; font: inherit; font-size: 12px; font-weight: 600;
color: #3b4654; cursor: pointer;
}
/* ── Property facts block — sits above the chronological event feed.
* Same visual language as the timeline rows (subtle borders, muted
* keys, accent badges for the tier chip) so the two read as one card.
*/
.survey-runner-facts {
display: grid;
row-gap: 5px;
padding: 8px 0 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eef1f4;
}
.survey-runner-facts-row {
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 10px;
align-items: baseline;
font-size: 12.5px;
line-height: 1.4;
}
.survey-runner-facts-key {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #8a96a3;
}
.survey-runner-facts-val {
color: #1a1f24;
font-weight: 500;
word-break: break-word;
}
.survey-runner-facts-val--warn { color: #b25500; font-weight: 600; }
/* Ownership tier badge — colored by tier the same way confidence
* chips elsewhere are. Compact pill, inline with the value. */
.survey-runner-facts-tier {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 999px;
background: #eef2f6;
color: #3b4654;
border: 1px solid transparent;
vertical-align: 2px;
}
.survey-runner-facts-tier--high { background: #e2f3ea; color: #1e6b3f; border-color: #c7e6d3; }
.survey-runner-facts-tier--medium { background: #fff3d6; color: #8a5a00; border-color: #f2dca6; }
.survey-runner-facts-tier--low { background: #fde2e1; color: #94322c; border-color: #f0c5c2; }
.survey-runner-facts-tier--public { background: #e0e9f4; color: #2a4a73; border-color: #c4d4e8; }
/* Inline status tag — sits next to the value (e.g. "mail to parcel"
* after PRE %, "brand-new owner" after a fresh sale). */
.survey-runner-facts-tag {
display: inline-block;
margin-left: 6px;
padding: 0 6px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 4px;
background: #f1f4f8;
color: #5b6672;
vertical-align: 1px;
}
.survey-runner-facts-tag--ok { background: #e2f3ea; color: #1e6b3f; }
.survey-runner-facts-tag--warn { background: #fde2e1; color: #94322c; }
.survey-runner-facts-tag--fresh { background: #e0e9f4; color: #2a4a73; }
/* Dark theme — the existing det.land theme-enhancements.js sets
* body.theme-dark. Mirror our light-mode classes. */
body.theme-dark .survey-login-card {
background: #1f262d;
color: #e6eaee;
}
body.theme-dark .survey-login-card p { color: #9aa6b2; }
body.theme-dark .survey-login-btn {
background: #2a333c;
color: #e6eaee;
border-color: #3b454f;
}
body.theme-dark .survey-login-btn:hover:not([disabled]) {
background: #34404a;
border-color: #4493d6;
color: #e6eaee;
}
body.theme-dark .survey-runner-title { color: #f0f3f6; }
body.theme-dark .survey-runner-survey { color: #9aa6b2; }
body.theme-dark .survey-question,
body.theme-dark .survey-state-card,
body.theme-dark .survey-answers-summary {
background: #232c34;
border-color: #2f3a44;
color: #e6eaee;
}
body.theme-dark .survey-question-prompt { color: #e6eaee; }
body.theme-dark .survey-runner-timeline-icon { background: #2a333c; border-color: #3b454f; color: #cdd5dd; }
body.theme-dark .survey-runner-timeline-icon:hover { background: #34404a; }
body.theme-dark .survey-runner-timeline-icon.is-on { background: #0080ff; border-color: #0080ff; color: #fff; }
body.theme-dark .survey-runner-timeline-dropdown { background: #232c34; border-color: #2f3a44; }
body.theme-dark .survey-runner-timeline-chip { background: #2b3640; color: #cdd5dd; }
body.theme-dark .survey-runner-timeline-feed::before { background: #2f3a44; }
body.theme-dark .survey-runner-timeline-row + .survey-runner-timeline-row { border-top-color: #2a333c; }
body.theme-dark .survey-runner-timeline-node { border-color: #232c34; }
body.theme-dark .survey-runner-timeline-label { color: #e6eaee; }
body.theme-dark .survey-runner-timeline-detail { color: #9aa6b2; }
body.theme-dark .survey-runner-facts { border-bottom-color: #2f3a44; }
body.theme-dark .survey-runner-facts-key { color: #7a8694; }
body.theme-dark .survey-runner-facts-val { color: #e6eaee; }
body.theme-dark .survey-runner-facts-val--warn { color: #f0a05a; }
body.theme-dark .survey-runner-facts-tier { background: #2b3640; color: #cdd5dd; }
body.theme-dark .survey-runner-facts-tier--high { background: #1d3a2a; color: #7ddca0; border-color: #28523b; }
body.theme-dark .survey-runner-facts-tier--medium { background: #3d3018; color: #f0c971; border-color: #5a4626; }
body.theme-dark .survey-runner-facts-tier--low { background: #3d1f1f; color: #f0a5a0; border-color: #5a2c2c; }
body.theme-dark .survey-runner-facts-tier--public { background: #1f2d3d; color: #a0c4f0; border-color: #2c425a; }
body.theme-dark .survey-runner-facts-tag { background: #2b3640; color: #9aa6b2; }
body.theme-dark .survey-runner-facts-tag--ok { background: #1d3a2a; color: #7ddca0; }
body.theme-dark .survey-runner-facts-tag--warn { background: #3d1f1f; color: #f0a5a0; }
body.theme-dark .survey-runner-facts-tag--fresh { background: #1f2d3d; color: #a0c4f0; }
body.theme-dark .survey-runner-timeline-more { background: #2b3640; color: #cdd5dd; }
body.theme-dark .survey-state-card.success {
background: #1f2d24;
border-color: #2c4234;
color: #c8e6d3;
}
body.theme-dark .survey-btn {
background: #2a333c;
color: #e6eaee;
border-color: #3b454f;
}
body.theme-dark .survey-btn:hover:not([disabled]) {
background: #34404a;
border-color: #4493d6;
color: #e6eaee;
}
body.theme-dark .survey-text-form textarea {
background: #1f272f;
color: #e6eaee;
border-color: #3b454f;
}
/* ── Phase B: Mapillary-centered layout ──────────────────────────────────
*
* Earlier this rule hid `#panel-body` while survey mode was active, on
* the theory that surveyors don't need the parcel detail content
* (permits, sales, blight). It turned out to break Mapillary: the
* shared selection-panel.js reparents `#mapillary-container` into
* `#mobile-mapillary-slot` *inside* `#panel-body` whenever a parcel is
* selected — that's how det.land shows the viewer as part of the
* parcel card. Hiding panel-body took the Mapillary container with it.
*
* For now the parcel detail content stays visible; surveyors get
* orientation chrome plus the runner above it. A cleaner version of
* the layout pivot will need to either (a) move the runner OUT of the
* sidebar so it can coexist with parcel chrome, or (b) target only
* the bigquery-rendered detail rows inside panel-body (leaving the
* mapillary slot intact).
*/
/* Hide the legend in swap mode so it stops covering the map PiP. */
body.survey-active.sv-swapped #map-legend,
body.survey-active.sv-swapped #legend-toggle-btn {
display: none !important;
}
/* Survey brand chip — replaces det.land's floating-header (which had
* the home button + search). Same visual language as det.land's home
* button (white pill, blue bold text) so the brand reads identically;
* just narrower because there's no search input next to it. The whole
* chip is a single button — clicking it flies the map back to the
* overview center.
*/
#survey-brand-chip {
position: fixed;
top: 10px;
left: 10px;
z-index: 1000;
pointer-events: none;
}
#survey-brand-chip > * { pointer-events: auto; }
#survey-brand-chip #home-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 10px;
background: #ffffff;
border: none;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #0080ff;
font-family: inherit;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
cursor: pointer;
transition: box-shadow 0.15s ease;
}
#survey-brand-chip #home-button:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
#survey-brand-chip .survey-brand-icon {
flex: 0 0 auto;
color: #0080ff;
width: 20px;
height: 20px;
}
body.theme-dark #survey-brand-chip #home-button {
background: #1f262d;
color: #6db5ff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
body.theme-dark #survey-brand-chip .survey-brand-icon {
color: #6db5ff;
}
/* Survey-settings popover (opens from the brand chip). For now its only
* entry toggles the on-screen debug log. */
.survey-settings-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 210px;
background: #fff;
border: 1px solid #e6e9ee;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(20, 30, 45, 0.18);
padding: 10px 12px;
z-index: 1001;
}
.survey-settings-popover[hidden] { display: none; }
.survey-settings-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #8a96a3;
margin-bottom: 8px;
}
.survey-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 14px;
font-weight: 500;
color: #1a1f24;
cursor: pointer;
}
.survey-settings-row input { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; flex: none; }
body.theme-dark .survey-settings-popover { background: #1f262d; border-color: #2f3a44; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
body.theme-dark .survey-settings-title { color: #9aa6b2; }
body.theme-dark .survey-settings-row { color: #e6eaee; }
/* Push the floating info chip below the brand chip so they don't
* overlap when both are visible. */
.survey-info-chip {
top: 60px;
}
/* Hide the floating-viewer's title bar in two cases:
*
* 1. body.survey-mode.sv-swapped — Mapillary is full-bleed; the bar
* would read as a white stripe across the top of the canvas.
* Users still have a path back to map-big via #map-pip-chrome.
*
* 2. body.survey-active — in-session survey runtime, on every
* viewport. The header chrome (Detroit Street View title, History
* pill, Gallery pill, Swap, Minimize) serves no purpose during a
* walk: year is dictated by the schedule (not History), swapping
* is disabled (rule below), and minimizing would hide the surface
* the surveyor needs. On mobile the 32px strip especially wasted
* vertical space inside the 65%-tall imagery pane.
*/
body.survey-mode.sv-swapped .floating-viewer-header,
body.survey-active .floating-viewer-header {
display: none !important;
}
/* Reclaim the 32px the floating-viewer-header used to occupy when
* we hide it. theme-enhancements.js (line ~1627) pushes
* #mapillary-viewer down by `top: 32px` and constrains its height to
* `calc(100% - 32px)` so the canvas sits below the header. With the
* header hidden, that offset leaves a 32px strip of the container's
* white background showing at the top. Override in both hide
* conditions so the canvas fills the container edge-to-edge.
*/
body.survey-mode.sv-swapped #mapillary-container.floating-viewer #mapillary-viewer,
body.survey-active #mapillary-container.floating-viewer #mapillary-viewer {
top: 0 !important;
height: 100% !important;
}
body.survey-mode.sv-swapped #mapillary-container.floating-viewer #mapillary-spinner,
body.survey-active #mapillary-container.floating-viewer #mapillary-spinner {
top: 50% !important;
}
/* "No swapping in survey-mode" applies on every viewport — the
* surveyor never has a reason to flip map↔panorama mid-walk. Kill
* both swap buttons + the map-PiP chrome that hosts one of them.
* The desktop split-layout uses these same rules, so this also
* supersedes the duplicates that previously lived inside the
* `@media (min-width: 769px)` block below (now removed).
*/
body.survey-active #map-pip-chrome,
body.survey-active .floating-viewer-swap-btn,
body.survey-active .map-pip-swap-btn {
display: none !important;
}
/* ── Mapillary viewer toolbar — vertical icon rail on the right edge,
* mirrors the map's icon rail pattern. Icon-only square buttons in a
* vertical stack so the user reads each one by hover-tooltip; nothing
* competes with Mapillary's own `< >` sequence arrows at the top or
* the brand chip at the top-left. ID + !important pins display so
* the cascade can't collapse children of #mapillary-container in any
* survey-* layout. */
.mapillary-toolbar,
#mapillary-toolbar {
/* Mirror the existing `#icon-rail` pattern exactly so the
* Mapillary toolbar reads as the same UI family as the map's
* vertical icon rail. Base: pinned 10px from the top + right of
* the viewport. Two overrides below cascade for the account-chip
* and sidebar-visible states (same as #icon-rail does). */
position: fixed !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
z-index: 100 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px;
pointer-events: none;
}
/* Slide DOWN below the Dexter account chip — same offset as
* `body.has-account-chip #icon-rail { top: 54px; }` so the two
* rails line up vertically when both are on screen. */
body.has-account-chip .mapillary-toolbar,
body.has-account-chip #mapillary-toolbar {
top: 54px !important;
}
/* Slide LEFT off the sidebar's inner edge in any layout that has
* a visible right sidebar — sidebar-visible (det.land flow) or
* survey-active (this app's session layout). Same calc the icon-
* rail uses; --sidebar-width is set globally and defaults to 380px
* (matches the deployed `.account-chip` rule). */
body.sidebar-visible .mapillary-toolbar,
body.sidebar-visible #mapillary-toolbar,
body.survey-active .mapillary-toolbar,
body.survey-active #mapillary-toolbar {
right: calc(var(--sidebar-width, 380px) + 10px) !important;
}
.mapillary-toolbar > * { pointer-events: auto; }
.mapillary-toolbar-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #e0e6ed;
background: #fff;
color: #1a2a3a;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.mapillary-toolbar-btn:hover {
background: #f5f7fa;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.mapillary-toolbar-btn.is-off {
/* Toggle-off state — slightly grey bg, neutral icon. Reads as
* "muted / inactive" at a glance. No blue highlight. */
color: #4a5260;
background: #eef0f3;
border-color: rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.mapillary-toolbar-btn.is-on {
/* Toggle-on state — solid det.land blue fill, white icon.
* Reads unmistakably as "active" against the white / grey
* inactive states. */
color: #ffffff;
background: #0080ff;
border-color: #0080ff;
box-shadow: 0 2px 10px rgba(0, 128, 255, 0.35);
}
.mapillary-toolbar-btn.is-on:hover {
background: #0070e0;
border-color: #0070e0;
}
.mapillary-toolbar-btn:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
/* The Map-toggle button only makes sense on mobile, where the map
* is hidden by default and needs an explicit affordance to reveal.
* On desktop the split-screen always shows both, so the button is
* dead weight. Hide it via a viewport rule below (kept here as a
* base default so the button stays accessible if a future layout
* resurfaces it). */
.mapillary-toolbar-btn--mobile-only { display: none; }
@media (max-width: 768px), (max-height: 600px) {
.mapillary-toolbar-btn--mobile-only { display: inline-flex; }
}
.mapillary-toolbar-btn-label {
/* Icon-only rail — hide any text label that ships in the markup. */
display: none !important;
}
body.theme-dark .mapillary-toolbar-btn {
background: #1c252e;
color: #e6eaee;
border-color: #2a3340;
}
body.theme-dark .mapillary-toolbar-btn:hover { background: #2a3340; }
body.theme-dark .mapillary-toolbar-btn.is-off {
background: #0f1620;
color: #9aa6b2;
}
/* ── Annotation panel (toolbar action) ───────────────────────────────
* Icon-rail-style strip opened by the Annotate toolbar button.
* Mirrors #icon-rail's elevated-card visuals (rounded corners,
* shadow, tokenized colors) so the surveyor reads the toolbar +
* panel as one UI family.
*
* Three render states from annotation-tools.js's renderPanel():
* - tools: [ point ] [ polygon ] (default)
* - drawing: "Click vertices…" + cancel icon (mid-draw)
* - tagging: [ name input ] [ ✓ ] [ × ] (post-draw)
* Plus a vertical list of saved annotations below the tools row.
*
* Positioned just to the LEFT of the toolbar (uses the same
* sidebar-aware right offset). See `.mapillary-toolbar` above —
* the !important on BOTH the base right + the survey-active
* override is load-bearing; without it the panel ends up at the
* viewport's right edge, hidden behind #details-sidebar.
*/
.mapillary-annotation-panel {
position: fixed !important;
top: 10px !important;
right: 56px !important;
/* Sits left of the toolbar (36px wide + 10px gap = 46px →
* +10 internal gap = 56px from viewport right at base).
* With account chip on, drop to align with the toolbar's
* shifted-down position. */
z-index: 1100;
display: none !important;
flex-direction: column;
gap: var(--space-1, 4px);
padding: var(--space-1, 4px);
background: var(--color-bg-elevated, #fff);
border-radius: var(--radius-lg, 8px);
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
font-family: inherit;
color: var(--color-fg-primary, #1a2a3a);
/* Slide-in: starts shifted right (collapsed into the toolbar),
* eases out when .is-open is added. */
transform: translateX(8px);
opacity: 0;
pointer-events: none;
transition:
transform var(--motion-base, 0.2s) ease,
opacity var(--motion-base, 0.2s) ease;
}
.mapillary-annotation-panel.is-open {
display: flex !important;
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
body.has-account-chip .mapillary-annotation-panel { top: 54px !important; }
body.sidebar-visible .mapillary-annotation-panel,
body.survey-active .mapillary-annotation-panel {
/* Toolbar at right: calc(sidebar + 10) + toolbar width 36 +
* 10px inter-element gap = sidebar + 56. Same load-bearing
* !important as the toolbar override. */
right: calc(var(--sidebar-width, 380px) + 56px) !important;
}
/* Horizontal row inside the panel — used for the tool picker,
* the drawing hint, and the tagging prompt. */
.anno-panel-row {
display: flex;
align-items: center;
gap: var(--space-1, 4px);
}
.anno-panel-drawing-row,
.anno-panel-tag-row {
padding: 4px 6px;
}
.anno-panel-drawing-hint {
font-size: 12px;
color: var(--color-fg-secondary, #6b7682);
white-space: nowrap;
padding-right: 4px;
}
/* Icon button — same dimensions / hover semantics as
* .icon-rail-button in theme.css so the panel reads as part of
* the rail family. */
.anno-panel-icon-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-md, 6px);
color: var(--color-fg-secondary, #6b7682);
cursor: pointer;
padding: 0;
transition:
background-color var(--motion-fast, 0.15s),
color var(--motion-fast, 0.15s);
}
.anno-panel-icon-btn:hover {
background-color: var(--color-bg-hover, #f3f5f7);
color: var(--color-fg-primary, #1a2a3a);
}
.anno-panel-icon-btn:focus-visible {
outline: 2px solid var(--color-accent, #2563eb);
outline-offset: 2px;
}
.anno-panel-icon-btn--commit { color: var(--color-success-accent); }
.anno-panel-icon-btn--commit:hover {
background-color: color-mix(in srgb, var(--color-success-accent) 12%, transparent);
color: var(--color-success-fg);
}
.anno-panel-icon-btn--cancel { color: var(--color-danger-accent); }
.anno-panel-icon-btn--cancel:hover {
background-color: color-mix(in srgb, var(--color-danger-accent) 10%, transparent);
color: var(--color-danger-fg);
}
.anno-panel-icon-btn--remove {
width: 24px;
height: 24px;
color: var(--color-danger-accent);
}
.anno-panel-icon-btn--remove:hover {
background-color: color-mix(in srgb, var(--color-danger-accent) 10%, transparent);
}
/* Tag input — small inline field that appears post-draw. */
.anno-panel-tag-input {
flex: 1;
min-width: 140px;
padding: 6px 10px;
border: 1px solid var(--color-border-strong, #d0d7de);
border-radius: var(--radius-md, 6px);
background: var(--color-bg-base, #fff);
font-size: 13px;
font-family: inherit;
color: var(--color-fg-primary, #1a2a3a);
}
.anno-panel-tag-input:focus {
outline: none;
border-color: var(--color-accent, #2563eb);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
/* Saved-annotations list — compact, sits below the tool row.
* Hidden when empty (renderPanel returns '' for the section). */
.anno-panel-list {
list-style: none;
margin: 4px 0 0 0;
padding: 4px 0 0 0;
border-top: 1px solid var(--color-border, #e6eaee);
display: flex;
flex-direction: column;
gap: 2px;
max-height: 220px;
overflow-y: auto;
}
.anno-panel-list-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 6px;
font-size: 12px;
}
.anno-panel-tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 1;
padding: 2px 8px;
border-radius: 999px;
background: var(--anno-hue, #2563eb);
color: #fff;
font-weight: 600;
font-size: 11px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dark theme overrides — mirror what theme.css does for the
* icon-rail. The tokens above pick up the dark values
* automatically; these are the few raw colors that need to flip. */
body.theme-dark .anno-panel-tag-input {
background: #0f1620;
border-color: #2a3340;
color: #e6eaee;
}
body.theme-dark .anno-panel-list { border-top-color: #2a3340; }
/* ── Annotation preview-confirm modal ────────────────────────────────
* Centered overlay shown after the surveyor finishes drawing a
* geometry. The crop preview lets them confirm the polygon actually
* captured the feature they meant — name + save commits, cancel
* deletes the geometry from the viewer. Backdrop click = cancel.
*
* Higher z-index than #icon-rail / sidebar / annotation panel since
* it should sit ABOVE all other survey chrome while up.
*/
.anno-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 22, 32, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 11000;
padding: 20px;
animation: anno-modal-fade-in 0.18s ease;
}
@keyframes anno-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.anno-modal {
background: var(--color-bg-elevated, #fff);
color: var(--color-fg-primary, #1a2a3a);
border-radius: var(--radius-lg, 8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
width: min(420px, 100%);
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
overflow: hidden;
font-family: inherit;
animation: anno-modal-pop-in 0.20s cubic-bezier(0.2, 0.8, 0.4, 1);
}
@keyframes anno-modal-pop-in {
from { transform: translateY(8px) scale(0.98); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.anno-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--color-border, #e6eaee);
font-size: 14px;
}
.anno-modal-header strong { text-transform: capitalize; }
.anno-modal-close {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--color-fg-secondary, #6b7682);
border-radius: var(--radius-md, 6px);
cursor: pointer;
padding: 0;
transition: background-color var(--motion-fast, 0.15s);
}
.anno-modal-close:hover { background: var(--color-bg-hover, #f3f5f7); color: var(--color-fg-primary, #1a2a3a); }
.anno-modal-preview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #0f1620;
min-height: 200px;
padding: 12px;
}
.anno-modal-preview[data-state="loading"] .anno-modal-preview-image,
.anno-modal-preview[data-state="loading"] .anno-modal-preview-error,
.anno-modal-preview[data-state="ready"] .anno-modal-spinner,
.anno-modal-preview[data-state="ready"] .anno-modal-preview-error,
.anno-modal-preview[data-state="error"] .anno-modal-spinner,
.anno-modal-preview[data-state="error"] .anno-modal-preview-image {
display: none;
}
.anno-modal-preview-image {
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
background-repeat: no-repeat;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
}
.anno-modal-spinner {
width: 28px;
height: 28px;
border: 3px solid rgba(255, 255, 255, 0.18);
border-top-color: rgba(255, 255, 255, 0.85);
border-radius: 50%;
animation: anno-modal-spin 0.8s linear infinite;
}
@keyframes anno-modal-spin { to { transform: rotate(360deg); } }
.anno-modal-preview-error {
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
text-align: center;
padding: 24px 16px;
}
.anno-modal-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px 0;
}
.anno-modal-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-fg-secondary, #6b7682);
font-weight: 600;
}
.anno-modal-input {
padding: 9px 12px;
border: 1px solid var(--color-border-strong, #d0d7de);
border-radius: var(--radius-md, 6px);
background: var(--color-bg-base, #fff);
color: var(--color-fg-primary, #1a2a3a);
font-size: 14px;
font-family: inherit;
transition: border-color var(--motion-fast, 0.15s), box-shadow var(--motion-fast, 0.15s);
}
.anno-modal-input:focus {
outline: none;
border-color: var(--color-accent, #2563eb);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.anno-modal-input--invalid {
border-color: #b91c1c;
animation: anno-modal-shake 0.32s ease;
}
@keyframes anno-modal-shake {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-2px); }
}
.anno-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 16px 16px;
}
.anno-modal-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--radius-md, 6px);
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition:
background-color var(--motion-fast, 0.15s),
color var(--motion-fast, 0.15s),
border-color var(--motion-fast, 0.15s);
}
.anno-modal-btn--ghost {
background: transparent;
border-color: var(--color-border-strong, #d0d7de);
color: var(--color-fg-secondary, #6b7682);
}
.anno-modal-btn--ghost:hover { background: var(--color-bg-hover, #f3f5f7); color: var(--color-fg-primary, #1a2a3a); }
.anno-modal-btn--primary {
background: var(--color-accent, #2563eb);
color: #fff;
}
.anno-modal-btn--primary:hover { background: #1d4fd1; }
body.theme-dark .anno-modal-preview { background: #0a0f15; }
body.theme-dark .anno-modal-header { border-bottom-color: #2a3340; }
body.theme-dark .anno-modal-close { color: #9aa6b2; }
body.theme-dark .anno-modal-close:hover { background: #2a3340; color: #e6eaee; }
body.theme-dark .anno-modal-input {
background: #0f1620;
border-color: #2a3340;
color: #e6eaee;
}
body.theme-dark .anno-modal-btn--ghost {
border-color: #2a3340;
color: #9aa6b2;
}
body.theme-dark .anno-modal-btn--ghost:hover { background: #2a3340; color: #e6eaee; }
/* Hide the "Viewing: Parcels / Neighborhoods" mode pill on
* survey.det.land. Its top-left position collides with the survey
* brand chip — the surveying flow is parcel-only at the zoom levels
* surveyors operate at, so the mode indicator adds no value here.
*/
body.survey-mode .viewing-mode-chip {
display: none !important;
}
/* Floating property info chip — Phase B-3.
* Anchored to the page (not the Mapillary canvas). */
.survey-info-chip {
position: fixed;
top: 60px;
left: 16px;
z-index: 850;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
padding: 10px 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
font-size: 13px;
line-height: 1.4;
color: #222;
max-width: min(360px, 40vw);
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity 200ms ease, transform 200ms ease;
}
.survey-info-chip.visible {
opacity: 1;
transform: translateY(0);
}
.survey-info-chip-eyebrow {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
margin-bottom: 2px;
}
.survey-info-chip-address {
font-size: 14px;
font-weight: 600;
color: #1a1f24;
}
.survey-info-chip-meta {
margin-top: 4px;
font-size: 12px;
color: #5a6470;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.survey-info-chip-meta > span + span::before {
content: "·";
margin-right: 8px;
color: #b8c0c8;
}
/* Mapillary popup card content (survey-mode replacement for the old
* blue lightbulb SimpleMarker). Mapillary's PopupComponent wraps our
* DOM in `.mapillary-popup-content` + a tip — we just style what's
* inside. Compact 4-line address card.
*/
.survey-mapillary-popup {
min-width: 180px;
max-width: 240px;
color: #1a1f24;
line-height: 1.35;
}
.survey-mapillary-popup-eyebrow {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #0080ff;
margin-bottom: 2px;
}
.survey-mapillary-popup-title {
font-size: 14px;
font-weight: 700;
color: #1a1f24;
}
.survey-mapillary-popup-highlights {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
}
.survey-mapillary-popup-row {
display: flex;
justify-content: space-between;
gap: 8px;
}
.survey-mapillary-popup-label {
color: #6b7682;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.04em;
align-self: center;
}
.survey-mapillary-popup-value {
color: #1a1f24;
font-weight: 600;
text-align: right;
}
/* The SDK paints a white default background on `.mapillary-popup-content`
* but its border-radius is small — round it a bit and add a soft shadow
* to match the rest of the survey chrome. */
body.survey-mode .mapillary-popup-content {
border-radius: 8px !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
padding: 10px 12px !important;
}
body.theme-dark .survey-info-chip {
background: rgba(34, 41, 49, 0.95);
border-color: rgba(255, 255, 255, 0.08);
color: #e6eaee;
}
body.theme-dark .survey-info-chip-eyebrow { color: #9aa6b2; }
body.theme-dark .survey-info-chip-address { color: #f0f3f6; }
body.theme-dark .survey-info-chip-meta { color: #9aa6b2; }
body.theme-dark .survey-info-chip-meta > span + span::before { color: #4a5560; }
@media (max-width: 768px), (max-height: 600px) {
.survey-info-chip { display: none; }
}
/* ── Phase C: Session launcher ─────────────────────────────────────────
*
* Empty-state CTA — a centered card overlay over the map, dimming
* the surroundings. Visible only when (signed in && no parcel
* selected && no active session). Designed to direct the user into
* the session flow rather than sit as a passive button.
*/
.session-launcher-cta {
position: fixed;
inset: 0;
z-index: 870;
background: rgba(13, 17, 23, 0.18);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
pointer-events: none; /* let map underneath stay clickable for free-explore */
}
.session-launcher-cta[hidden] { display: none; }
.session-launcher-cta-card {
pointer-events: auto;
width: min(420px, 100%);
background: #ffffff;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
padding: 28px 28px 22px;
text-align: center;
box-sizing: border-box;
animation: session-launcher-cta-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes session-launcher-cta-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.session-launcher-cta-icon {
color: #0080ff;
margin-bottom: 8px;
}
.session-launcher-cta-title {
margin: 0 0 8px;
font-size: 20px;
font-weight: 600;
color: #1a1f24;
}
.session-launcher-cta-sub {
margin: 0 0 22px;
font-size: 14px;
line-height: 1.5;
color: #5a6470;
}
.session-launcher-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
background: #0080ff;
color: #fff;
border: none;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0, 128, 255, 0.32);
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease,
transform 0.15s ease;
}
.session-launcher-cta-btn:hover {
background: #0070e0;
box-shadow: 0 6px 18px rgba(0, 128, 255, 0.42);
transform: translateY(-1px);
}
.session-launcher-cta-btn:active { transform: translateY(0); }
/* Slice 7.5 — Resume previous session list inside the CTA card.
One row per active session, each is its own card with metadata +
action buttons. */
.session-launcher-cta-resume {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed #d9dee4;
width: 100%;
box-sizing: border-box;
}
.session-launcher-cta-resume[hidden] { display: none; }
.session-launcher-cta-resume-label {
font-size: 12px;
color: #6b7682;
text-align: center;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.session-launcher-cta-resume-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.session-launcher-cta-resume-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fafbfc;
}
.session-launcher-cta-resume-row-meta {
flex: 1;
min-width: 0;
}
.session-launcher-cta-resume-row-where {
font-size: 14px;
font-weight: 600;
color: #1a1f24;
margin-bottom: 2px;
}
.session-launcher-cta-resume-row-detail {
font-size: 12px;
color: #6b7682;
}
.session-launcher-cta-resume-row-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.session-launcher-cta-resume-btn {
background: #fff;
border: 1px solid #0080ff;
color: #0080ff;
font: inherit;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.session-launcher-cta-resume-btn:hover {
background: rgba(0, 128, 255, 0.08);
}
.session-launcher-cta-resume-dismiss {
background: none;
border: none;
color: #6b7682;
font: inherit;
font-size: 12px;
cursor: pointer;
padding: 4px 6px;
text-decoration: underline;
text-underline-offset: 2px;
}
.session-launcher-cta-resume-dismiss:hover { color: #1a1f24; }
body.theme-dark .session-launcher-cta-resume { border-top-color: #2a3340; }
body.theme-dark .session-launcher-cta-resume-label { color: #9aa6b2; }
body.theme-dark .session-launcher-cta-resume-row {
background: #1c2330;
border-color: #2a3340;
}
body.theme-dark .session-launcher-cta-resume-row-where { color: #e6eaee; }
body.theme-dark .session-launcher-cta-resume-row-detail { color: #9aa6b2; }
body.theme-dark .session-launcher-cta-resume-btn {
background: transparent;
border-color: #6db5ff;
color: #6db5ff;
}
body.theme-dark .session-launcher-cta-resume-btn:hover {
background: rgba(109, 181, 255, 0.12);
}
body.theme-dark .session-launcher-cta-resume-dismiss { color: #9aa6b2; }
body.theme-dark .session-launcher-cta-resume-dismiss:hover { color: #e6eaee; }
body.theme-dark .session-launcher-cta {
background: rgba(13, 17, 23, 0.45);
}
body.theme-dark .session-launcher-cta-card {
background: #1f262d;
}
body.theme-dark .session-launcher-cta-title { color: #f0f3f6; }
body.theme-dark .session-launcher-cta-sub { color: #9aa6b2; }
body.theme-dark .session-launcher-cta-icon { color: #6db5ff; }
/* Launcher v2 — left-rail panel that slides in from the left. The
* right side of the viewport stays the live map (Slice B will dim
* unrelated chrome and add boundary/parcel preview shading). */
.session-launcher-panel {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(460px, 90vw);
z-index: 1900;
background: #fff;
box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
box-sizing: border-box;
animation: session-launcher-slide-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.session-launcher-panel[hidden] { display: none; }
/* Slice C2 — autoStart loading state.
*
* Slice 8 originally hid the panel entirely while autoStart created
* the session ("Start a session" from the dashboard skips the wizard
* and drops the user directly on a parcel). But the full transition
* runs 2–5 seconds across survey-fetch + centroid scan + lease query
* + Firestore write + map flyTo + Mapillary picker. A blank wait
* felt frozen.
*
* Now we keep the panel mounted, hide the wizard sections, and show
* a clean centered loading card whose label mirrors setStatus()'s
* progression: "Loading survey config…" → "Mapping N parcels…" →
* "Coordinating with team…" → "Creating session…" → "Loading first
* parcel…". Hits the same modal real estate but with helpful copy
* instead of dead air.
*/
.session-launcher-panel--auto-running .session-launcher-header,
.session-launcher-panel--auto-running .session-launcher-body,
.session-launcher-panel--auto-running .session-launcher-actions {
display: none;
}
.session-launcher-auto-loading {
display: none;
}
.session-launcher-panel--auto-running .session-launcher-auto-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 48px 24px;
min-height: 220px;
}
.session-launcher-auto-loading-spinner {
width: 32px;
height: 32px;
border: 3px solid #e1e8ef;
border-top-color: #2563eb;
border-radius: 50%;
animation: session-launcher-auto-loading-spin 1s linear infinite;
}
.session-launcher-auto-loading-label {
font-size: 14px;
font-weight: 500;
color: #1a2a3a;
text-align: center;
}
@keyframes session-launcher-auto-loading-spin {
to { transform: rotate(360deg); }
}
body.theme-dark .session-launcher-auto-loading-spinner {
border-color: #3b454f;
border-top-color: #6db5ff;
}
body.theme-dark .session-launcher-auto-loading-label { color: #e6eaee; }
@keyframes session-launcher-slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.session-launcher-header {
padding: 18px 20px 12px;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px solid #eee;
flex: 0 0 auto;
}
.session-launcher-eyebrow {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7682;
margin-bottom: 4px;
}
.session-launcher-header h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1a1f24;
line-height: 1.25;
}
.session-launcher-close {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: #f0f4f8;
color: #5a6470;
font-size: 18px;
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.session-launcher-close:hover { background: #e1e8ef; color: #1a1f24; }
.session-launcher-body {
padding: 4px 20px 8px;
overflow-y: auto;
flex: 1 1 auto;
}
.session-launcher-section {
padding: 16px 0;
border-bottom: 1px solid #f0f4f8;
}
.session-launcher-section:last-child { border-bottom: none; }
.session-launcher-section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.session-launcher-section-step {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 50%;
background: #eaf4ff;
color: #0080ff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.session-launcher-section-header h3 {
margin: 0;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #1a1f24;
}
.session-launcher-section-optional {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #8893a0;
font-style: italic;
margin-left: 6px;
}
.session-launcher-section-hint {
margin: 0 0 12px;
font-size: 12px;
color: #5a6470;
line-height: 1.5;
}
.session-launcher-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.session-launcher-field > span {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
display: flex;
align-items: center;
justify-content: space-between;
}
/* "+ Create new" pill sits inline with the SURVEY label. Hidden by
* default (gated on /surveyAuthors membership in session-launcher.js).
*/
.session-launcher-field-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.session-launcher-create-survey {
font-size: 12px;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
color: #0080ff;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.session-launcher-create-survey:hover { text-decoration: underline; }
.session-launcher-field select {
height: 38px;
padding: 0 10px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
background: #fff;
color: #1a1f24;
appearance: auto;
}
.session-launcher-field select:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.18);
}
/* Boundary chip picker */
.session-launcher-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
min-height: 24px;
}
.session-launcher-chips-empty {
font-size: 12px;
color: #8893a0;
font-style: italic;
line-height: 1.5;
}
.session-launcher-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 10px;
background: #eaf4ff;
color: #1864ab;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
.session-launcher-chip-remove {
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: rgba(24, 100, 171, 0.15);
color: #1864ab;
font-size: 12px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.session-launcher-chip-remove:hover {
background: rgba(24, 100, 171, 0.3);
}
/* Slice 8 — chips pinned by the survey definition (read-only). */
.session-launcher-chip--pinned {
background: #f1f5f9;
color: #475569;
border-color: #cbd5e1;
padding-right: 10px;
}
.session-launcher-chip-pin-mark {
margin-left: 6px;
font-size: 11px;
opacity: 0.65;
}
body.theme-dark .session-launcher-chip--pinned {
background: #1e2733;
color: #cbd5e1;
border-color: #2a3340;
}
.session-launcher-search {
position: relative;
}
.session-launcher-search input[type="text"] {
width: 100%;
height: 38px;
padding: 0 12px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
background: #fff;
color: #1a1f24;
box-sizing: border-box;
}
.session-launcher-search input[type="text"]:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.18);
}
.session-launcher-suggestions {
position: absolute;
top: 42px;
left: 0;
right: 0;
margin: 0;
padding: 4px 0;
background: #fff;
border: 1px solid #d0d7de;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
list-style: none;
z-index: 10;
max-height: 240px;
overflow-y: auto;
}
.session-launcher-suggestions[hidden] { display: none; }
.session-launcher-suggestions li {
padding: 7px 12px;
font-size: 13px;
color: #1a1f24;
cursor: pointer;
}
.session-launcher-suggestions li:hover {
background: #f0f4f8;
color: #0080ff;
}
/* Big count widget */
.session-launcher-count {
display: flex;
align-items: baseline;
gap: 8px;
padding: 14px 16px;
background: #f6f8fa;
border: 1px solid #e1e4e8;
border-radius: 8px;
margin-bottom: 10px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.session-launcher-count[data-state="loading"] { background: #fff7ed; border-color: #fed7aa; }
.session-launcher-count[data-state="ok"] { background: #e8f5ee; border-color: #a3d3b6; }
.session-launcher-count[data-state="empty"] { background: #fef2f2; border-color: #fecaca; }
.session-launcher-count-num {
font-size: 26px;
font-weight: 700;
color: #0080ff;
font-variant-numeric: tabular-nums;
}
.session-launcher-count[data-state="ok"] .session-launcher-count-num { color: #0a4d2a; }
.session-launcher-count[data-state="empty"] .session-launcher-count-num { color: #7a1a1a; }
.session-launcher-count-label {
font-size: 12px;
color: #5a6470;
line-height: 1.4;
flex: 1 1 auto;
}
.session-launcher-compute {
display: block;
width: 100%;
height: 36px;
padding: 0 14px;
border: 1px solid #0080ff;
background: #fff;
color: #0080ff;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.session-launcher-compute:hover { background: #eaf4ff; }
.session-launcher-compute:disabled { opacity: 0.55; cursor: not-allowed; }
.session-launcher-status {
margin: 8px 0 0;
min-height: 18px;
font-size: 12px;
color: #6b7682;
}
.session-launcher-actions {
padding: 14px 20px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid #eee;
flex: 0 0 auto;
}
.session-launcher-cancel {
padding: 9px 14px;
border: 1px solid #d0d7de;
background: #fff;
color: #1a1f24;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
cursor: pointer;
}
.session-launcher-cancel:hover { background: #f6f8fa; }
.session-launcher-cancel:disabled,
.session-launcher-start:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.session-launcher-start {
padding: 9px 16px;
background: #0080ff;
border: 1px solid #0080ff;
color: #fff;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.session-launcher-start:hover:not(:disabled) {
background: #0070e0;
border-color: #0070e0;
}
/* ── Survey builder modal (Phase F) ─────────────────────────────────
* Visually mirrors the session-launcher modal — same overlay, card,
* header, footer pattern. Builder-specific bits (textarea, validation
* status, suggested-target fieldset) get their own rules below.
*/
.survey-builder-modal {
position: fixed;
inset: 0;
z-index: 1950; /* sits above session-launcher-modal */
background: rgba(13, 17, 23, 0.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.survey-builder-modal[hidden] { display: none; }
/* Slice 8 — inline mode for the side-by-side /surveys/new layout.
No overlay, no backdrop; the builder card stretches to fill the
left-column form host. */
.survey-builder-modal--inline {
position: static;
inset: auto;
z-index: auto;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0;
display: block;
}
.survey-builder-modal--inline .survey-builder-card {
width: 100%;
max-height: none;
box-shadow: none;
border-radius: 0;
border: none;
background: transparent;
}
.survey-builder-modal--inline .survey-builder-header {
/* Slice 8 — inline-mode header shouldn't carry the modal's
prominent title bar. /surveys/new has its own H1 above the
builder host; the modal's redundant "Create a survey" title
gets hidden via display: none here. The × close button stays
(used as the form's cancel affordance). */
border-bottom: none;
padding: 0 0 8px 0;
justify-content: flex-end;
}
.survey-builder-modal--inline .survey-builder-header h2 {
display: none;
}
.survey-builder-modal--inline .survey-builder-body {
padding: 0 0 24px;
}
.survey-builder-modal--inline .survey-builder-actions {
padding: 18px 0 4px;
border-top: 1px solid #e6eaee;
margin-top: 8px;
}
body.theme-dark .survey-builder-modal--inline .survey-builder-actions { border-top-color: #2a3340; }
/* Slice 8 — detached scope/org field. When the builder's
[data-scope-field] gets moved out of the modal body to a host
element above the map, it picks up this card chrome so it reads
as a top-of-page section, not as a misplaced form field. */
.survey-builder-field--detached {
background: #fff;
border: 1px solid #e6eaee;
border-radius: 12px;
padding: 14px 16px 16px;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* Slice 8 — `display: flex` on the detached field would normally win
over [hidden] { display: none } at the same specificity (later
wins). Explicit `[hidden]` rule here keeps the field gone when
populateScope decides it shouldn't show. */
.survey-builder-field--detached[hidden] { display: none !important; }
.survey-builder-field--detached input[type="text"],
.survey-builder-field--detached textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid #d0d7de;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 15px;
color: #1a1f24;
box-sizing: border-box;
}
.survey-builder-field--detached input[type="text"]:focus,
.survey-builder-field--detached textarea:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 2px rgba(0, 128, 255, 0.15);
}
body.theme-dark .survey-builder-field--detached input[type="text"],
body.theme-dark .survey-builder-field--detached textarea {
background: #1f272f;
border-color: #2a3340;
color: #e6eaee;
}
/* Slice 8 — hover popup on the builder map showing the
neighborhood name. Pill-shaped, dark, low-key — doesn't compete
with the boundary highlight. */
.builder-map-hover-popup .maplibregl-popup-content {
background: rgba(28, 35, 48, 0.92);
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
pointer-events: none;
}
.builder-map-hover-popup .maplibregl-popup-tip {
display: none;
}
/* Slice 8 — selected boundary summary card (rendered below the map
when the user has picked at least one neighborhood). */
.survey-new-boundary-summary-card {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 18px;
}
.survey-new-boundary-summary-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #075985;
text-transform: uppercase;
margin-bottom: 4px;
}
.survey-new-boundary-summary-names {
font-size: 14px;
color: #0c4a6e;
line-height: 1.5;
}
body.theme-dark .survey-new-boundary-summary-card {
background: rgba(7, 89, 133, 0.18);
border-color: rgba(186, 230, 253, 0.3);
}
body.theme-dark .survey-new-boundary-summary-label { color: #7dd3fc; }
body.theme-dark .survey-new-boundary-summary-names { color: #bae6fd; }
.survey-builder-field--detached > span {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #6b7682;
text-transform: uppercase;
}
.survey-builder-field--detached select {
width: 100%;
height: 38px;
padding: 0 12px;
border: 1px solid #d0d7de;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
color: #1a1f24;
}
.survey-builder-field--detached select:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 2px rgba(0, 128, 255, 0.15);
}
body.theme-dark .survey-builder-field--detached {
background: #1c2330;
border-color: #2a3340;
}
body.theme-dark .survey-builder-field--detached > span { color: #9aa6b2; }
body.theme-dark .survey-builder-field--detached select {
background: #1f272f;
border-color: #2a3340;
color: #e6eaee;
}
/* Slice 8 — form-column header on /surveys/new (above the builder
host). Page-level title; matches the dashboard's section header
style. */
.survey-new-form-header {
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid #e6eaee;
}
.survey-new-form-header h1 {
margin: 0 0 4px;
font-size: 26px;
font-weight: 600;
color: #1a1f24;
letter-spacing: -0.01em;
}
.survey-new-form-header p {
margin: 0;
color: #6b7682;
font-size: 14px;
line-height: 1.5;
}
body.theme-dark .survey-new-form-header { border-bottom-color: #2a3340; }
body.theme-dark .survey-new-form-header h1 { color: #f0f3f6; }
body.theme-dark .survey-new-form-header p { color: #9aa6b2; }
.survey-builder-card {
width: min(640px, 100%);
max-height: 90vh;
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.survey-builder-header {
padding: 18px 20px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #eee;
}
.survey-builder-header h2 {
margin: 0;
font-size: 17px;
font-weight: 600;
color: #1a1f24;
}
.survey-builder-close {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: #f0f4f8;
color: #5a6470;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.survey-builder-close:hover { background: #e1e8ef; color: #1a1f24; }
.survey-builder-body {
padding: 16px 20px 8px;
overflow-y: auto;
flex: 1 1 auto;
}
.survey-builder-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.survey-builder-field > span {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.survey-builder-field input[type="text"],
.survey-builder-field textarea,
.survey-builder-field select {
padding: 8px 10px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
color: #1a1f24;
background: #fff;
box-sizing: border-box;
}
.survey-builder-field textarea[name="questions"] {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.45;
min-height: 200px;
resize: vertical;
}
.survey-builder-field input:focus,
.survey-builder-field textarea:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.18);
}
.survey-builder-target {
border: 1px solid #e1e8ef;
border-radius: 8px;
padding: 10px 12px 12px;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.survey-builder-target legend {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
padding: 0 4px;
}
.survey-builder-target label {
display: flex;
gap: 8px;
align-items: center;
font-size: 14px;
color: #1a1f24;
}
.survey-builder-hint {
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: #8a949f;
margin-left: 6px;
}
/* Slice 8 — Mapillary vintage picker on the builder. Same chrome
as the parcel-type fieldset above so the form reads as one
continuous "what kind of survey is this" pass. */
.survey-builder-imagery {
border: 1px solid #e1e8ef;
border-radius: 8px;
padding: 10px 12px 12px;
margin: 0 0 14px;
}
.survey-builder-imagery legend {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
padding: 0 4px;
}
.survey-builder-imagery-row {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 12px;
margin-top: 6px;
}
.survey-builder-imagery-years {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.survey-builder-imagery-year {
background: #fff;
border: 1px solid #d9dee4;
color: #1a1f24;
font: inherit;
font-size: 15px;
padding: 8px 18px;
border-radius: 999px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.survey-builder-imagery-year:hover {
background: #f5f8fb;
border-color: #b9c4d0;
}
.survey-builder-imagery-year.is-selected {
background: #0080ff;
border-color: #0080ff;
color: #fff;
box-shadow: 0 2px 6px rgba(0, 128, 255, 0.32);
}
.survey-builder-imagery-year.is-selected:hover {
background: #0070e0;
border-color: #0070e0;
}
.survey-builder-imagery-custom-toggle {
margin-top: 8px;
}
/* Opt-in pill — matches the year pills; reveals the date inputs on click. */
.survey-builder-imagery-custom-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
font: inherit;
font-size: 15px;
color: #1a1f24;
background: #fff;
border: 1px solid #d9dee4;
border-radius: 999px;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease;
}
.survey-builder-imagery-custom-trigger:hover {
background: #f5f8fb;
border-color: #b9c4d0;
}
.survey-builder-imagery-custom-trigger[aria-expanded="true"] {
border-color: #0080ff;
}
.survey-builder-imagery-custom-chevron {
font-size: 11px;
color: #7a8693;
transition: transform 0.15s ease;
}
.survey-builder-imagery-custom-trigger.is-open .survey-builder-imagery-custom-chevron {
transform: rotate(180deg);
}
.survey-builder-imagery-custom {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 12px;
margin-top: 6px;
padding: 10px;
background: #fafbfc;
border: 1px solid #e1e6ec;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* The `display: flex` above outranks the browser's [hidden]{display:none},
so without this the panel stays visible even when the hidden attr is set.
Keep it collapsed until the user opts in via the pill. */
.survey-builder-imagery-custom[hidden] { display: none; }
body.theme-dark .survey-builder-imagery-custom-trigger {
background: #1c2330;
border-color: #2a3340;
color: #e6eaee;
}
body.theme-dark .survey-builder-imagery-custom-trigger:hover {
background: #2a3340;
border-color: #3a4654;
}
body.theme-dark .survey-builder-imagery-custom {
background: #1c2330;
border-color: #2a3340;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
body.theme-dark .survey-builder-imagery-year {
background: #1c2330;
border-color: #2a3340;
color: #e6eaee;
}
body.theme-dark .survey-builder-imagery-year:hover {
background: #2a3340;
border-color: #3a4654;
}
body.theme-dark .survey-builder-imagery-year.is-selected {
background: #2563eb;
border-color: #2563eb;
}
body.theme-dark .survey-builder-imagery-custom {
background: #1c2330;
border-color: #2a3340;
}
/* Slice 8 — boundary picker on the builder. Same chrome as the
parcel-type fieldset so the form reads as one continuous pass. */
.survey-builder-boundaries {
border: 1px solid #e1e8ef;
border-radius: 8px;
padding: 10px 12px 12px;
margin: 0 0 14px;
}
.survey-builder-boundaries legend {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
padding: 0 4px;
}
.survey-builder-boundary-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
min-height: 32px;
}
.survey-builder-boundary-empty {
font-size: 12px;
color: #8a949f;
align-self: center;
}
.survey-builder-boundary-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e0f2fe;
color: #075985;
border: 1px solid #93c5fd;
border-radius: 999px;
padding: 3px 6px 3px 12px;
font-size: 13px;
font-weight: 500;
}
.survey-builder-boundary-chip-x {
background: transparent;
border: none;
color: #075985;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0 6px;
border-radius: 50%;
}
.survey-builder-boundary-chip-x:hover {
background: rgba(7, 89, 133, 0.15);
}
body.theme-dark .survey-builder-boundaries { border-color: #2a3340; }
body.theme-dark .survey-builder-boundaries legend { color: #9aa6b2; }
body.theme-dark .survey-builder-boundary-empty { color: #7a8693; }
body.theme-dark .survey-builder-boundary-chip {
background: rgba(7, 89, 133, 0.35);
color: #bae6fd;
border-color: rgba(186, 230, 253, 0.4);
}
body.theme-dark .survey-builder-boundary-chip-x { color: #bae6fd; }
body.theme-dark .survey-builder-boundary-chip-x:hover {
background: rgba(186, 230, 253, 0.15);
}
.survey-builder-imagery-row label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: #6b7682;
}
.survey-builder-imagery-row input[type="date"] {
padding: 6px 8px;
border: 1px solid #d9dee4;
border-radius: 6px;
font: inherit;
font-size: 13px;
color: #1a1f24;
background: #fff;
}
.survey-builder-imagery-row input[type="date"]:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 2px rgba(0, 128, 255, 0.15);
}
.survey-builder-imagery-clear {
font-size: 12px;
}
body.theme-dark .survey-builder-imagery {
border-color: #2a3340;
}
body.theme-dark .survey-builder-imagery legend { color: #9aa6b2; }
body.theme-dark .survey-builder-imagery-row label { color: #9aa6b2; }
body.theme-dark .survey-builder-imagery-row input[type="date"] {
background: #1c2330;
border-color: #2a3340;
color: #e6eaee;
}
.survey-builder-reset {
background: transparent;
border: none;
color: #0080ff;
font-size: 12px;
cursor: pointer;
padding: 0;
}
.survey-builder-reset:hover { text-decoration: underline; }
.survey-builder-validation {
min-height: 18px;
font-size: 12px;
color: #6b7682;
margin-bottom: 4px;
}
.survey-builder-validation.ok { color: #1a8753; }
.survey-builder-validation.error { color: #c0392b; }
.survey-builder-actions {
padding: 12px 20px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid #eee;
}
.survey-builder-cancel {
padding: 9px 14px;
border: 1px solid #d0d7de;
background: #fff;
color: #1a1f24;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
cursor: pointer;
}
.survey-builder-cancel:hover { background: #f6f8fa; }
.survey-builder-cancel:disabled,
.survey-builder-publish:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.survey-builder-publish {
padding: 9px 16px;
background: #0080ff;
border: 1px solid #0080ff;
color: #fff;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.survey-builder-publish:hover:not(:disabled) {
background: #0070e0;
border-color: #0070e0;
}
/* ── Builder question cards (Phase F v1) ──────────────────────────────
* Replaces the v0 JSON textarea with a structured list. Each card is
* a question with prompt + type + required + (choices) + branching.
*/
.survey-builder-questions {
margin: 0 0 12px;
}
.survey-builder-questions-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
}
.survey-builder-questions-header > span {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
}
.survey-builder-question-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Slice 8 — question card visual refresh. Matches the rest of the
survey app (profile-session-card, activity-card): clean white,
subtle border, no garish blue header bar. */
.survey-builder-question-card {
border: 1px solid #e6eaee;
border-radius: 10px;
background: #fff;
overflow: hidden;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.survey-builder-question-card:hover {
border-color: #d0d7de;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.survey-builder-question-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px 8px;
background: transparent;
border-bottom: 1px solid #f0f2f5;
}
.survey-builder-question-num {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #6b7682;
text-transform: uppercase;
}
body.theme-dark .survey-builder-question-card {
background: #1c2330;
border-color: #2a3340;
}
body.theme-dark .survey-builder-question-card:hover { border-color: #3a4654; }
body.theme-dark .survey-builder-question-header { border-bottom-color: #2a3340; }
body.theme-dark .survey-builder-question-num { color: #9aa6b2; }
.survey-builder-question-actions {
display: flex;
gap: 4px;
}
.survey-builder-question-actions .iconbtn {
width: 24px;
height: 24px;
border-radius: 4px;
border: 1px solid transparent;
background: transparent;
color: #5a6470;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.survey-builder-question-actions .iconbtn:hover:not(:disabled) {
background: #e1e8ef;
color: #1a1f24;
}
.survey-builder-question-actions .iconbtn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.survey-builder-question-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.survey-builder-question-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.survey-builder-question-row > span {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
}
.survey-builder-question-row input[type="text"],
.survey-builder-question-row textarea,
.survey-builder-question-row select {
padding: 7px 9px;
border: 1px solid #d0d7de;
border-radius: 5px;
font-family: inherit;
font-size: 13px;
color: #1a1f24;
background: #fff;
box-sizing: border-box;
}
.survey-builder-question-row input:focus,
.survey-builder-question-row textarea:focus,
.survey-builder-question-row select:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.18);
}
.survey-builder-question-row-inline {
flex-direction: row;
gap: 12px;
align-items: flex-end;
}
.survey-builder-question-typewrap {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.survey-builder-question-required {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #1a1f24;
padding: 0 0 8px; /* align with select baseline */
}
.survey-builder-question-branch {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.survey-builder-question-branch-single {
display: flex;
flex-direction: column;
gap: 4px;
}
.survey-builder-add-question {
margin-top: 10px;
width: 100%;
padding: 9px 12px;
border: 1px dashed #b0bac5;
border-radius: 6px;
background: transparent;
color: #5a6470;
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: all 150ms ease;
}
.survey-builder-add-question:hover:not(:disabled) {
border-color: #0080ff;
color: #0080ff;
background: rgba(0, 128, 255, 0.04);
}
.survey-builder-add-question:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ── Questions step redesign ──────────────────────────────────────── */
.survey-builder-questions-intro {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.survey-builder-questions-intro .survey-builder-reset { flex: 0 0 auto; white-space: nowrap; }
/* Inline answer-type switcher — segmented icon pills. */
.survey-builder-qtype-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.survey-builder-qtype {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid #d9dee4;
border-radius: 999px;
background: #fff;
color: #495057;
font: inherit;
font-size: 13px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.survey-builder-qtype:hover { background: #f5f8fb; border-color: #b9c4d0; }
.survey-builder-qtype-icon { width: 16px; height: 16px; display: inline-flex; }
.survey-builder-qtype-icon svg { width: 100%; height: 100%; }
.survey-builder-qtype.is-active { background: #0080ff; border-color: #0080ff; color: #fff; }
body.theme-dark .survey-builder-qtype { background: #1c2330; border-color: #2a3340; color: #c2cad3; }
body.theme-dark .survey-builder-qtype:hover { background: #2a3340; }
body.theme-dark .survey-builder-qtype.is-active { background: #0080ff; border-color: #0080ff; color: #fff; }
/* Required toggle switch. */
.survey-builder-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #1a1f24;
cursor: pointer;
}
.survey-builder-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.survey-builder-toggle-track {
position: relative;
width: 36px;
height: 20px;
border-radius: 999px;
background: #cfd6dd;
transition: background 0.15s ease;
flex: 0 0 auto;
}
.survey-builder-toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease;
}
.survey-builder-toggle input:checked + .survey-builder-toggle-track { background: #0080ff; }
.survey-builder-toggle input:checked + .survey-builder-toggle-track::after { transform: translateX(16px); }
.survey-builder-toggle input:focus-visible + .survey-builder-toggle-track { box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.3); }
body.theme-dark .survey-builder-toggle { color: #e6eaee; }
body.theme-dark .survey-builder-toggle-track { background: #3a4654; }
/* Live "Surveyor sees" preview. */
.survey-builder-qpreview {
border: 1px dashed #dbe0e6;
border-radius: 8px;
background: #f8fafc;
padding: 10px 12px;
}
.survey-builder-qpreview-label {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9aa6b2;
margin-bottom: 6px;
}
.survey-builder-qpreview-prompt { font-size: 14px; font-weight: 600; color: #1a1f24; margin-bottom: 8px; }
.survey-builder-qpreview-btns,
.survey-builder-qpreview-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.survey-builder-qpreview-btn {
display: inline-flex;
padding: 6px 14px;
border: 1px solid #cdd5dd;
border-radius: 8px;
background: #fff;
font-size: 13px;
color: #1a1f24;
}
.survey-builder-qpreview-text {
padding: 8px 10px;
border: 1px solid #cdd5dd;
border-radius: 8px;
background: #fff;
color: #9aa6b2;
font-size: 13px;
}
.survey-builder-qpreview-note { font-size: 12px; color: #7a8693; }
.survey-builder-qpreview-checks { display: flex; flex-direction: column; gap: 4px; }
.survey-builder-qpreview-check {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border: 1px solid #cdd5dd;
border-radius: 8px;
background: #fff;
font-size: 13px;
color: #1a1f24;
}
.survey-builder-qpreview-check::before {
content: '';
width: 13px;
height: 13px;
border: 1.5px solid #aab4bf;
border-radius: 3px;
flex: none;
}
body.theme-dark .survey-builder-qpreview-check { background: #1c2330; border-color: #2a3340; color: #e6eaee; }
.survey-builder-qpreview-draw { display: flex; flex-direction: column; gap: 6px; }
.survey-builder-qpreview-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.survey-builder-qpreview-tag {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: #e9eef3;
color: #495057;
}
body.theme-dark .survey-builder-qpreview { background: #161c27; border-color: #2a3340; }
body.theme-dark .survey-builder-qpreview-prompt { color: #e6eaee; }
body.theme-dark .survey-builder-qpreview-btn,
body.theme-dark .survey-builder-qpreview-text { background: #1c2330; border-color: #2a3340; color: #e6eaee; }
/* Footer: required toggle + skip-logic disclosure. */
.survey-builder-question-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.survey-builder-skiplogic { font-size: 13px; }
.survey-builder-skiplogic > summary {
cursor: pointer;
color: #5a6470;
font-size: 12px;
list-style: none;
user-select: none;
}
.survey-builder-skiplogic > summary::-webkit-details-marker { display: none; }
.survey-builder-skiplogic > summary::before { content: '▸ '; color: #9aa6b2; }
.survey-builder-skiplogic[open] > summary::before { content: '▾ '; }
.survey-builder-skiplogic-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
body.theme-dark .survey-builder-skiplogic > summary { color: #9aa6b2; }
/* Add-question type gallery. */
.survey-builder-add-question-wrap { margin-top: 12px; }
.survey-builder-add-question-plus { font-weight: 700; }
.survey-builder-add-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
margin-top: 8px;
}
.survey-builder-add-gallery[hidden] { display: none; }
.survey-builder-add-type {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
padding: 12px;
border: 1px solid #e1e6ec;
border-radius: 10px;
background: #fff;
cursor: pointer;
transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.survey-builder-add-type:hover {
border-color: #0080ff;
box-shadow: 0 2px 8px rgba(0, 128, 255, 0.12);
transform: translateY(-1px);
}
.survey-builder-add-type-icon { width: 22px; height: 22px; color: #0080ff; }
.survey-builder-add-type-icon svg { width: 100%; height: 100%; }
.survey-builder-add-type-label { font-size: 14px; font-weight: 600; color: #1a1f24; }
.survey-builder-add-type-blurb { font-size: 12px; color: #7a8693; line-height: 1.35; }
body.theme-dark .survey-builder-add-type { background: #1c2330; border-color: #2a3340; }
body.theme-dark .survey-builder-add-type-label { color: #e6eaee; }
/* "Start from a template" picker at the top of the questions step. */
.survey-builder-templates { margin: 4px 0 16px; }
.survey-builder-templates-label {
display: block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #7a8693;
margin-bottom: 8px;
}
.survey-builder-template-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
}
.survey-builder-template-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
text-align: left;
padding: 12px 14px;
border: 1px solid #e1e6ec;
border-radius: 10px;
background: #fff;
cursor: pointer;
transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.survey-builder-template-card:hover {
border-color: #0080ff;
box-shadow: 0 2px 8px rgba(0, 128, 255, 0.12);
transform: translateY(-1px);
}
.survey-builder-template-card.is-active {
border-color: #2563eb;
box-shadow: 0 0 0 1px #2563eb inset;
background: #f5f9ff;
}
.survey-builder-template-icon { width: 24px; height: 24px; color: #0080ff; }
.survey-builder-template-icon svg { width: 100%; height: 100%; }
.survey-builder-template-name { font-size: 14px; font-weight: 600; color: #1a1f24; }
.survey-builder-template-blurb { font-size: 12px; color: #7a8693; line-height: 1.35; }
body.theme-dark .survey-builder-template-card { background: #1c2330; border-color: #2a3340; }
body.theme-dark .survey-builder-template-card.is-active { background: #1c2a3d; border-color: #4493d6; box-shadow: 0 0 0 1px #4493d6 inset; }
body.theme-dark .survey-builder-template-name { color: #e6eaee; }
/* Choice options editor — add/remove rows. */
.survey-builder-choices { display: flex; flex-direction: column; gap: 6px; }
.survey-builder-choice-row { display: flex; align-items: center; gap: 6px; }
.survey-builder-choice-row input[type="text"] { flex: 1 1 auto; }
.survey-builder-choice-row .iconbtn {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: #8a94a0;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.survey-builder-choice-row .iconbtn:hover:not(:disabled) { background: #fdeaea; color: #c0392b; }
.survey-builder-choice-row .iconbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.survey-builder-add-choice {
align-self: flex-start;
margin-top: 2px;
padding: 4px;
border: none;
background: transparent;
color: #0080ff;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.survey-builder-add-choice:hover { text-decoration: underline; }
/* Annotation tags editor — chips + inline add input. */
.survey-builder-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 6px;
border: 1px solid #d0d7de;
border-radius: 6px;
background: #fff;
}
.survey-builder-tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 4px 3px 10px;
border-radius: 999px;
background: #eef4ff;
color: #0064cc;
font-size: 13px;
}
.survey-builder-tag-remove {
border: none;
background: transparent;
color: #0064cc;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0 2px;
border-radius: 50%;
}
.survey-builder-tag-remove:hover { background: rgba(0, 100, 204, 0.18); }
.survey-builder-tags .survey-builder-tag-input {
flex: 1 1 80px;
min-width: 80px;
border: none;
outline: none;
padding: 4px;
font: inherit;
font-size: 13px;
background: transparent;
box-shadow: none;
}
body.theme-dark .survey-builder-tags { background: #1c2330; border-color: #2a3340; }
body.theme-dark .survey-builder-tag-chip { background: #1f3350; color: #8fc0ff; }
body.theme-dark .survey-builder-tag-remove { color: #8fc0ff; }
body.theme-dark .session-launcher-panel {
background: #1f262d;
color: #e6eaee;
box-shadow: 6px 0 24px rgba(0, 0, 0, 0.5);
}
body.theme-dark .session-launcher-header { border-bottom-color: #2f3a44; }
body.theme-dark .session-launcher-header h2 { color: #f0f3f6; }
body.theme-dark .session-launcher-eyebrow { color: #9aa6b2; }
body.theme-dark .session-launcher-section { border-bottom-color: #2f3a44; }
body.theme-dark .session-launcher-section-header h3 { color: #f0f3f6; }
body.theme-dark .session-launcher-section-step {
background: rgba(0, 128, 255, 0.18);
color: #6db5ff;
}
body.theme-dark .session-launcher-section-hint { color: #9aa6b2; }
body.theme-dark .session-launcher-close {
background: #2a333c;
color: #c5cdd6;
}
body.theme-dark .session-launcher-close:hover {
background: #34404a;
color: #f0f3f6;
}
body.theme-dark .session-launcher-field select,
body.theme-dark .session-launcher-search input[type="text"] {
background: #1f272f;
border-color: #3b454f;
color: #e6eaee;
}
body.theme-dark .session-launcher-suggestions {
background: #1f262d;
border-color: #3b454f;
}
body.theme-dark .session-launcher-suggestions li { color: #e6eaee; }
body.theme-dark .session-launcher-suggestions li:hover {
background: #2a333c;
color: #6db5ff;
}
body.theme-dark .session-launcher-chip {
background: rgba(0, 128, 255, 0.18);
color: #6db5ff;
}
body.theme-dark .session-launcher-count {
background: #232c34;
border-color: #2f3a44;
}
body.theme-dark .session-launcher-count[data-state="loading"] { background: #2d2517; border-color: #4a3a1a; }
body.theme-dark .session-launcher-count[data-state="ok"] { background: #1f2d24; border-color: #2c4234; }
body.theme-dark .session-launcher-count[data-state="empty"] { background: #2d1f1f; border-color: #4a2828; }
body.theme-dark .session-launcher-count-label { color: #9aa6b2; }
body.theme-dark .session-launcher-compute {
background: rgba(0, 128, 255, 0.10);
border-color: #6db5ff;
color: #6db5ff;
}
body.theme-dark .session-launcher-compute:hover { background: rgba(0, 128, 255, 0.20); }
body.theme-dark .session-launcher-actions { border-top-color: #2f3a44; }
body.theme-dark .session-launcher-cancel {
background: #2a333c;
border-color: #3b454f;
color: #e6eaee;
}
body.theme-dark .session-launcher-cancel:hover { background: #34404a; }
/* Session-progress strip in the runner header — compact one-line
* layout: thin bar on top, single count line beneath. The
* boundary moved into the meta line above; "by you this session"
* lives in the tooltip + the recap/activity feed rather than
* eating header rows. */
.survey-session-progress {
margin-top: 8px;
font-size: 12px;
color: #5a6470;
}
.survey-session-progress-bar {
height: 4px;
background: #e1e8ef;
border-radius: 999px;
overflow: hidden;
margin-bottom: 4px;
}
.survey-session-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #0080ff 0%, #4ec3ff 100%);
transition: width 0.3s ease;
}
.survey-session-progress-counts {
display: flex;
align-items: baseline;
gap: 4px;
font-size: 12px;
color: #5a6470;
}
.survey-session-progress-counts strong {
color: #0080ff;
font-weight: 700;
}
.survey-session-progress-pct {
color: #8590a0;
font-size: 11px;
}
body.theme-dark .survey-session-progress { color: #9aa6b2; }
body.theme-dark .survey-session-progress-bar { background: #2f3a44; }
body.theme-dark .survey-session-progress-mine { color: #7a8595; }
/* ── Mapillary sequence-controls restyle (survey-mode only) ──────────
*
* Mapillary 4.1.2 puts the play / step-prev / step-next stepper plus a
* playback / timeline / expander group at the bottom of the viewer.
* Only the prev/next arrows are useful for surveying — the surveyor
* is stepping through frames manually as they answer questions, not
* playing back a tour. So we:
* 1) Move the stepper to the TOP of the viewer (so the bottom of
* the panorama is uncluttered and the runner panel + image
* caption have full bottom-real-estate).
* 2) Hide the play / stop buttons and the playback + timeline +
* expander controls. Just left + right arrows remain.
*
* Direction (cross-sequence) controls stay disabled at the SDK layer
* (mapillary-viewer.js sets `direction: false` in survey mode).
*/
body.survey-mode .mapillary-sequence-container {
/* Override Mapillary's own bottom anchor — surveyor wants this
* out of the way of the runner panel + caption. */
bottom: auto !important;
top: 14px !important;
}
body.survey-mode .mapillary-sequence-stepper {
/* Pill shape with subtle shadow — matches the brand chip + map-PiP
* chrome aesthetic. Width shrinks to fit just the 2 visible step
* buttons (the SDK reserves space for 4 by default — prev/play/
* stop/next — and our display:none on play+stop doesn't shrink
* that reservation). inline-flex + width:fit-content collapses
* the pill to just what's actually rendered. */
display: inline-flex !important;
align-items: center;
justify-content: center;
width: fit-content !important;
width: -moz-fit-content !important;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
overflow: hidden;
padding: 0 4px;
}
/* The SDK wraps the stepper in `.mapillary-sequence-container` and
* centers it via its own width math. With the stepper now narrower,
* the container's anchor still needs to track the new content size
* — switching to inline-flex centers it cleanly over the canvas. */
body.survey-mode .mapillary-sequence-container {
display: flex !important;
justify-content: center !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
pointer-events: none;
}
body.survey-mode .mapillary-sequence-container > * { pointer-events: auto; }
/* Drop the play / stop buttons + playback / timeline panels.
* Surveyor only needs prev/next arrows. */
body.survey-mode .mapillary-sequence-play,
body.survey-mode .mapillary-sequence-play-inactive,
body.survey-mode .mapillary-sequence-stop,
body.survey-mode .mapillary-sequence-controls,
body.survey-mode .mapillary-sequence-playback,
body.survey-mode .mapillary-sequence-timeline {
display: none !important;
}
body.survey-mode .mapillary-sequence-step-next,
body.survey-mode .mapillary-sequence-step-next-inactive,
body.survey-mode .mapillary-sequence-step-next-highlight,
body.survey-mode .mapillary-sequence-step-prev,
body.survey-mode .mapillary-sequence-step-prev-inactive,
body.survey-mode .mapillary-sequence-step-prev-highlight {
/* Explicit hit-target — the SDK renders these as backgrounds on
* elements with no intrinsic width, so the stepper's
* `width: fit-content` collapses unless we give each button a
* defined footprint. 36 × 36 matches the rest of the icon-
* button family on this app (toolbar buttons, icon-rail). */
display: inline-block !important;
width: 36px !important;
height: 36px !important;
background-size: 18px 18px !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
/* Keep the SDK's SVG glyph; recolor by tinting the background-image
* with a CSS filter — the glyphs are white in the source SVG, so
* `invert + sepia + …` shifts them toward our brand blue. */
filter: invert(48%) sepia(94%) saturate(2700%) hue-rotate(192deg)
brightness(99%) contrast(101%);
transition: filter 0.15s ease, background-color 0.15s ease;
}
body.survey-mode .mapillary-sequence-play:hover,
body.survey-mode .mapillary-sequence-step-next:hover,
body.survey-mode .mapillary-sequence-step-prev:hover,
body.survey-mode .mapillary-sequence-stop:hover {
background-color: rgba(0, 128, 255, 0.10) !important;
filter: invert(34%) sepia(96%) saturate(2870%) hue-rotate(195deg)
brightness(94%) contrast(104%);
}
/* Inactive states — visibly dimmed, no hover lift */
body.survey-mode .mapillary-sequence-play-inactive,
body.survey-mode .mapillary-sequence-step-next-inactive,
body.survey-mode .mapillary-sequence-step-prev-inactive {
opacity: 0.35 !important;
cursor: default !important;
}
body.theme-dark.survey-mode .mapillary-sequence-stepper {
background: rgba(34, 41, 49, 0.92);
border-color: rgba(255, 255, 255, 0.08);
}
/* ── Image-attribution caption (Phase C polish) ─────────────────────── */
.survey-image-caption {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 5;
padding: 5px 10px;
background: rgba(0, 0, 0, 0.55);
color: #f4f6f8;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.3;
pointer-events: none;
user-select: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.survey-image-caption[hidden] { display: none; }
.survey-image-caption-sep {
margin: 0 6px;
opacity: 0.5;
}
.survey-image-caption-source {
opacity: 0.85;
}
/* Survey-target hint inside the launcher modal (Phase C) */
.session-launcher-target {
display: flex;
align-items: center;
gap: 6px;
margin: -10px 0 16px;
font-size: 12px;
color: #5a6470;
font-style: italic;
}
.session-launcher-target svg {
flex: 0 0 auto;
color: #0080ff;
opacity: 0.85;
}
.session-launcher-target[hidden] { display: none; }
body.theme-dark .session-launcher-target { color: #9aa6b2; }
/* Multi-select filter fieldsets in the launcher modal (Phase C-2) */
.session-launcher-filters {
border: 1px solid #e1e4e8;
border-radius: 6px;
margin: 0 0 14px;
padding: 10px 12px 12px;
}
.session-launcher-filters legend {
padding: 0 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
}
.session-launcher-filters-hint {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #8893a0;
font-style: italic;
margin-left: 4px;
}
.session-launcher-filters label {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 13px;
color: #1a1f24;
cursor: pointer;
user-select: none;
}
.session-launcher-filters input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #0080ff;
cursor: pointer;
}
.session-launcher-filters input[type="checkbox"]:disabled,
.session-launcher-filters label:has(input:disabled) {
cursor: not-allowed;
opacity: 0.6;
}
/* Live count badge next to each filter checkbox — populated by
* `computeFilterBreakdown` after chip changes. Empty when no
* boundaries are picked. */
.session-launcher-filter-text {
flex: 1 1 auto;
}
.session-launcher-filter-count {
font-size: 12px;
font-weight: 600;
color: #6b7682;
background: #f0f4f8;
padding: 2px 8px;
border-radius: 999px;
min-width: 28px;
text-align: center;
}
.session-launcher-filter-count.is-loading {
opacity: 0.5;
}
.session-launcher-filter-count:empty {
display: none;
}
body.theme-dark .session-launcher-filters {
border-color: #2f3a44;
}
body.theme-dark .session-launcher-filter-count {
background: #2a333c;
color: #b8c0c8;
}
body.theme-dark .session-launcher-filters legend { color: #9aa6b2; }
body.theme-dark .session-launcher-filters-hint { color: #6e7884; }
body.theme-dark .session-launcher-filters label { color: #e6eaee; }
/* Survey-years section — year-precision Mapillary filter + multi-year
* walk picker. Single year = today's behavior. Multiple selected =
* walk each parcel through every year (runner-side walk in a later
* slice). Header carries a live count pill (boundary-scoped image
* count); body is a grid of year chips + quick-pick row. */
.session-launcher-imagery-count {
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: #6b7682;
background: #f0f4f8;
padding: 3px 10px;
border-radius: 999px;
min-width: 36px;
text-align: center;
}
.session-launcher-imagery-count[data-state="loading"] { opacity: 0.5; }
.session-launcher-imagery-count[data-state="ok"] { color: #0080ff; }
.session-launcher-imagery-count[data-state="empty"] { color: #c43c3c; }
.session-launcher-year-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.session-launcher-year-chip {
padding: 6px 12px;
border: 1px solid #d0d7de;
border-radius: 999px;
background: #fff;
color: #1a2a3a;
font-size: 13px;
font-family: inherit;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
min-width: 56px;
text-align: center;
}
.session-launcher-year-chip:hover {
background: #f3f5f7;
border-color: #b8c0c8;
}
.session-launcher-year-chip[data-selected="true"] {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
.session-launcher-year-chip[data-selected="true"]:hover { background: #1d4fd1; }
.session-launcher-year-chip:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.session-launcher-year-quickpicks {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.session-launcher-year-quick {
padding: 4px 10px;
background: transparent;
border: none;
color: #6b7682;
font-size: 12px;
font-family: inherit;
font-weight: 600;
cursor: pointer;
border-radius: 4px;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.session-launcher-year-quick:hover { color: #2563eb; }
.session-launcher-year-quick:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
body.theme-dark .session-launcher-imagery-count {
background: #2a333c;
color: #b8c0c8;
}
body.theme-dark .session-launcher-year-chip {
background: #1c252e;
border-color: #3b454f;
color: #e6eaee;
}
body.theme-dark .session-launcher-year-chip:hover {
background: #2a3340;
border-color: #4b5560;
}
body.theme-dark .session-launcher-year-chip[data-selected="true"] {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
body.theme-dark .session-launcher-year-quick { color: #9aa6b2; }
body.theme-dark .session-launcher-year-quick:hover { color: #60a5fa; }
/* Legacy dark-mode hook retained until firestore.rules / data
* migration removes any chance an old slips
* back in during a dev rollback. */
body.theme-dark .session-launcher-imagery-field { color: #9aa6b2; }
body.theme-dark .session-launcher-imagery-field input[type="month"] {
background: #1c252e;
border-color: #3b454f;
color: #e6eaee;
}
body.theme-dark .session-launcher-imagery-field input[type="month"]:focus {
border-color: #6db5ff;
box-shadow: 0 0 0 2px rgba(109, 181, 255, 0.18);
}
/* "Create new" inline button next to the Survey dropdown label
* (Phase F v0). */
.session-launcher-create-btn {
margin-left: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: transparent;
border: 1px solid #d0d7de;
border-radius: 999px;
color: #0080ff;
font-family: inherit;
font-size: 11px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.session-launcher-create-btn:hover {
background: #eaf4ff;
border-color: #0080ff;
}
.session-launcher-create-btn svg { color: #0080ff; }
body.theme-dark .session-launcher-create-btn {
border-color: #3b454f;
color: #6db5ff;
}
body.theme-dark .session-launcher-create-btn:hover {
background: rgba(0, 128, 255, 0.15);
border-color: #6db5ff;
}
/* Slice 8 — old duplicate `.survey-builder-modal` block deleted. It
was a stale copy of the rules from ~line 1217 and was overriding
the inline-mode (.survey-builder-modal--inline) variant because
cascading order put it after. Canonical builder styles live
above; dark-theme overrides for them live below. */
.survey-builder-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.survey-builder-field > span {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
display: flex;
align-items: center;
justify-content: space-between;
}
.survey-builder-field input[type="text"],
.survey-builder-field textarea {
padding: 9px 10px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
background: #fff;
color: #1a1f24;
box-sizing: border-box;
resize: vertical;
}
.survey-builder-field textarea[name="questions"] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
line-height: 1.5;
min-height: 240px;
}
.survey-builder-field input[type="text"]:focus,
.survey-builder-field textarea:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.18);
}
.survey-builder-reset {
background: none;
border: none;
padding: 0;
color: #0080ff;
cursor: pointer;
text-decoration: underline;
font: inherit;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.survey-builder-target {
border: 1px solid #e1e4e8;
border-radius: 6px;
margin: 0 0 14px;
padding: 10px 12px 12px;
}
.survey-builder-target legend {
padding: 0 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7682;
}
.survey-builder-hint {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #8893a0;
font-style: italic;
margin-left: 4px;
}
.survey-builder-target label {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 13px;
color: #1a1f24;
cursor: pointer;
}
.survey-builder-target input[type="radio"] {
accent-color: #0080ff;
cursor: pointer;
}
.survey-builder-validation {
margin: 0 0 8px;
padding: 8px 10px;
font-size: 12px;
border-radius: 6px;
background: #f6f8fa;
color: #5a6470;
min-height: 18px;
border: 1px solid transparent;
}
.survey-builder-validation.is-ok {
background: #e8f5ee;
border-color: #a3d3b6;
color: #0a4d2a;
}
.survey-builder-validation.is-error {
background: #fdecec;
border-color: #f3b8b8;
color: #7a1a1a;
}
.survey-builder-actions {
padding: 12px 20px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
border-top: 1px solid #eee;
}
.survey-builder-cancel {
padding: 9px 14px;
border: 1px solid #d0d7de;
background: #fff;
color: #1a1f24;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
cursor: pointer;
}
.survey-builder-cancel:hover { background: #f6f8fa; }
.survey-builder-publish {
padding: 9px 16px;
}
.survey-builder-cancel:disabled,
.survey-builder-publish:disabled {
opacity: 0.6;
cursor: not-allowed;
}
body.theme-dark .survey-builder-card { background: #1f262d; }
body.theme-dark .survey-builder-header { border-bottom-color: #2f3a44; }
body.theme-dark .survey-builder-header h2 { color: #f0f3f6; }
body.theme-dark .survey-builder-close {
background: #2a333c;
color: #c5cdd6;
}
body.theme-dark .survey-builder-close:hover { background: #34404a; color: #f0f3f6; }
body.theme-dark .survey-builder-field input[type="text"],
body.theme-dark .survey-builder-field textarea {
background: #1f272f;
border-color: #3b454f;
color: #e6eaee;
}
body.theme-dark .survey-builder-target { border-color: #2f3a44; }
body.theme-dark .survey-builder-target legend { color: #9aa6b2; }
body.theme-dark .survey-builder-target label { color: #e6eaee; }
body.theme-dark .survey-builder-validation {
background: #232c34;
color: #9aa6b2;
}
body.theme-dark .survey-builder-validation.is-ok {
background: #1f2d24;
border-color: #2c4234;
color: #c8e6d3;
}
body.theme-dark .survey-builder-validation.is-error {
background: #2d1f1f;
border-color: #4a2828;
color: #f0b8b8;
}
body.theme-dark .survey-builder-actions { border-top-color: #2f3a44; }
body.theme-dark .survey-builder-cancel {
background: #2a333c;
border-color: #3b454f;
color: #e6eaee;
}
body.theme-dark .survey-builder-cancel:hover { background: #34404a; }
/* Slice C: locked sections + completed step indicators */
.session-launcher-section.is-locked {
opacity: 0.45;
pointer-events: none;
}
.session-launcher-section.is-locked .session-launcher-section-header h3 {
color: #8893a0;
}
.session-launcher-section.is-locked .session-launcher-section-step {
background: #e1e8ef;
color: #8893a0;
}
.session-launcher-section-step.is-done {
background: #0080ff;
color: #fff;
font-size: 13px;
}
body.theme-dark .session-launcher-section.is-locked .session-launcher-section-header h3 {
color: #6e7884;
}
body.theme-dark .session-launcher-section.is-locked .session-launcher-section-step {
background: #2a333c;
color: #6e7884;
}
/* Slice B: dim unrelated chrome on the right side of the viewport
* while the launcher panel is open, so the surveyor's eye is drawn
* to the boundary preview overlay. The brand chip + map PiP swap
* are intentionally exempt. */
body.session-launcher-open #icon-rail,
body.session-launcher-open #map-legend,
body.session-launcher-open #legend-toggle-btn {
opacity: 0.4;
transition: opacity 200ms ease;
}
/* ── Phase Z layout — split right column ─────────────────────────────
*
* When the surveyor is mid-session (`body.survey-active`) we redesign
* the screen as:
*
* ┌─────────────────────────────────┬───────────────┐
* │ │ SURVEY │
* │ │ RUNNER │
* │ MAPILLARY PANORAMA │ (top 50%) │
* │ (left 60% of viewport) ├───────────────┤
* │ │ CONTEXT │
* │ │ MAP │
* │ │ (bottom 50%) │
* └─────────────────────────────────┴───────────────┘
*
* - theme-enhancements.js's `body.sv-swapped` swap/PiP rules are gated
* to `:not(.survey-active)`, so they no longer apply in the survey
* runtime (the runner sets streetView.swapped=true, but survey owns
* its own layout). The `body.survey-active` rules below are the sole
* source of truth for the survey swap layout.
* - The parcel-detail panel (BOUNDARIES / OWNERSHIP / TAX) is hidden;
* the surveyor doesn't need ownership records mid-session, and
* selection-panel.js:463 already short-circuits the panorama-reparent
* it'd otherwise do into #panel-body.
* - Swap chrome is hidden — no swapping in survey-mode anymore.
*
* Mobile rollout M1 — the hide-panel-body + runner-fills-sidebar
* rules USED TO live in the desktop-only @media block, leaving
* mobile users with the property profile + boundary chips + tab
* strip rendering below the runner inside the bottom sheet. They
* had to scroll past det.land parcel-explorer noise to reach the
* Yes/No question. The hide rules + runner-fills-sidebar are now
* viewport-agnostic (every device hides them in survey-active);
* only the SIZE rules (40vw / 50% height) stay desktop-only since
* mobile has its own bottom-sheet sizing.
*/
/* Hide det.land parcel-explorer surfaces during a survey session
* regardless of viewport — surveyor doesn't need property profile,
* boundary chips, tab strip, or the sidebar close button mid-flow. */
body.survey-active #panel-chip-row,
body.survey-active #panel-tab-strip,
body.survey-active #panel-body,
body.survey-active #panel-close,
body.survey-active #panel-expand {
display: none !important;
}
/* The mobile sheet drag-handle is hidden by default — only the phone
* breakpoint shows it (rule in the @media block below). Without this
* global hide the button's only display rules lived inside that media
* query, so on desktop it fell back to the native