/* ============================================================
 * find-similar.css — Find Similar tool step-content styles only.
 *
 * Tool-specific styles: profile picker, center-mode radio,
 * radius/circle-size/max-circles controls, results summary,
 * per-circle card list, save section, exports feedback, gate.
 *
 * Modified 2026-07-16 (Hotspot Finder slice Commit 1): filter-
 * surface / city-picker / zip-geocoder classes migrated to
 * geoweave-shell.css under `.gw-demo-*`, `.gw-city-picker-*`,
 * `.gw-zip-geocoder-*` prefixes so both FS and HF (and future
 * demographics-bg) consume the same visual language via
 * gwDemoFilterSurface / gwCityPicker / gwZipGeocoder helpers.
 *
 * See hotspot-finder-slice-scoping-<TS>.md Decision 5 for the
 * extraction rationale.
 *
 * Shell-owned styles (sidebar, project card, workflow card, modal
 * chrome, error strip, three-column layout) live in
 * geoweave-shell.css.
 * Design tokens live in geoweave-tokens.css.
 * ============================================================ */

/* Sections in the step body. */

.fs-section {
    margin-bottom: 16px;
}

.fs-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

/* Profile picker. */

.fs-profile-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-profile-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    font-size: 13px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.fs-profile-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    background: var(--color-bg-subtle);
    border-radius: 6px;
    text-align: center;
}

/* Center picker mode-radio (tool-specific — the three-mode
   choice between City/Zip/Map-click. The individual widgets
   themselves use .gw-city-picker-*/.gw-zip-geocoder-* from
   shell CSS). */

.fs-center-mode {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.fs-center-mode-btn {
    flex: 1;
    padding: 6px 4px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.fs-center-mode-btn:hover:not(.active) {
    background: var(--color-bg-subtle);
}

.fs-center-mode-btn.active {
    background: var(--color-action-primary);
    color: var(--color-action-text);
    border-color: var(--color-action-primary);
}

.fs-center-info {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border-radius: 4px;
    margin-top: 4px;
}

.fs-map-click-hint {
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 8px;
    background: var(--color-bg-subtle);
    border-radius: 4px;
    text-align: center;
}

/* Search parameter controls. */

.fs-param-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

/* Row label — rule was missing (labels rendered at browser-default
   16px/inherit color, the "font is off" defect). Mirrors
   .hf-param-label in hotspot-finder.css. */
.fs-param-label {
    font-size: 12px;
    min-width: 80px;
    color: var(--color-text-secondary);
}

.fs-param-btn {
    flex: 1;
    padding: 5px 4px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.fs-param-btn:hover:not(.active) {
    background: var(--color-bg-subtle);
}

.fs-param-btn.active {
    background: var(--color-action-primary);
    color: var(--color-action-text);
    border-color: var(--color-action-primary);
}

.fs-param-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-param-slider {
    flex: 1;
    height: 4px;
}

.fs-param-slider-val {
    font-size: 12px;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

/* Buttons + status. */

.fs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    background: var(--color-action-primary);
    color: var(--color-action-text);
    border: 1px solid var(--color-action-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--transition-fast);
}

.fs-btn:hover:not(:disabled) {
    filter: brightness(1.15);
}

.fs-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.fs-btn-secondary {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.fs-btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-subtle);
    filter: none;
}

.fs-search-status {
    padding: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border-radius: 4px;
    text-align: center;
    margin-top: 8px;
}

.fs-search-status.error {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

/* Results — summary + per-circle cards. */

.fs-results-summary {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--color-text-primary);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

.fs-results-summary .fs-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-action-primary);
}

.fs-results-summary .fs-meta {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.fs-circle-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.fs-circle-card {
    padding: 6px 8px;
    border: 1px solid var(--color-border-default);
    border-left: 3px solid var(--color-action-primary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--color-bg-surface);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.fs-circle-card:hover {
    background: var(--color-bg-subtle);
}

.fs-circle-card-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: var(--color-action-primary);
    margin-bottom: 2px;
}

.fs-circle-card-stats {
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* Export buttons row. */

.fs-export-row {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.fs-export-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.fs-export-btn:hover:not(:disabled) {
    background: var(--color-bg-subtle);
}

.fs-export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--color-text-tertiary);
}

.fs-export-btn .gw-ic {
    width: 18px;
}

/* Save section. */

.fs-save-section {
    padding: 12px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.fs-save-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.fs-save-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    font-size: 13px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

/* Gate (empty-state — no projects, or no `demographics` layer). */

.fs-gate {
    text-align: center;
    padding: 24px 12px;
    color: var(--color-text-secondary);
}

.fs-gate-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.fs-gate-body {
    font-size: 12px;
    margin-bottom: 12px;
}

.fs-gate-link {
    color: var(--color-action-primary);
    text-decoration: none;
    font-weight: 600;
}

.fs-gate-link:hover {
    text-decoration: underline;
}