/*
 * map-builder.css — Map Builder modal step styles (MB slice Commit 1).
 *
 * Class prefix gw-mb-. Colors and spacing lean on the design tokens
 * (geoweave-tokens.css); footer buttons reuse the shell's
 * .gw-modal-btn. Loaded on every canonical tool page via the
 * ADR-0031 co-load, so every selector here is prefixed.
 */

.gw-mb-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gw-mb-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gw-text-secondary, #555);
}

.gw-mb-input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 9px;
    font-size: 13px;
    border: 1px solid var(--gw-border, #d0d0d0);
    border-radius: 6px;
    background: var(--gw-surface, #fff);
    color: var(--gw-text, #222);
    box-sizing: border-box;
}
.gw-mb-input:focus {
    outline: 2px solid var(--gw-accent, #1f6feb);
    outline-offset: -1px;
}

.gw-mb-coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gw-mb-pick {
    align-self: flex-start;
}

.gw-mb-geo-result {
    font-size: 12px;
    line-height: 1.5;
    color: var(--gw-text-secondary, #555);
}
.gw-mb-geo-result:empty {
    display: none;
}

.gw-mb-geo-warn {
    margin-top: 4px;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: #fff7e6;
    border: 1px solid #f0c36d;
    color: #8a5a00;
}

.gw-mb-summary {
    font-size: 12px;
    color: var(--gw-text-secondary, #555);
}
.gw-mb-summary:empty {
    display: none;
}

.gw-mb-muted {
    font-size: 12px;
    color: var(--gw-text-muted, #888);
}

/* ---- Step 2: add-circle row + circle list ---- */

.gw-mb-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gw-mb-add-row .gw-mb-input {
    width: auto;
    flex: 1;
    margin-top: 0;
}

.gw-mb-color {
    width: 38px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--gw-border, #d0d0d0);
    border-radius: 6px;
    background: var(--gw-surface, #fff);
    cursor: pointer;
}

.gw-mb-circle-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gw-mb-circle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    border-bottom: 1px solid var(--gw-border-soft, #eee);
    font-size: 13px;
}
.gw-mb-circle-row:last-child {
    border-bottom: none;
}

.gw-mb-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.gw-mb-circle-label {
    flex: 1;
}

.gw-mb-remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 14px;
    border: 1px solid var(--gw-border, #d0d0d0);
    border-radius: 6px;
    background: var(--gw-surface, #fff);
    color: var(--gw-danger, #b02a2a);
    cursor: pointer;
}
.gw-mb-remove:hover {
    background: var(--gw-danger-soft, #fdecec);
}

/* ---- Session list ---- */

.gw-mb-session-label {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gw-text-secondary, #555);
}

.gw-mb-session {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.gw-mb-session td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--gw-border-soft, #eee);
}
.gw-mb-session tr:last-child td {
    border-bottom: none;
}