/**
 * /tools/boundary-viewer.css — Boundary Viewer tool styles.
 *
 * Tool-scoped (.bv-*). Written against the ACTUAL geoweave-tokens.css
 * schema (--color-* / --radius-* / --shadow-* / --font-*), not the
 * stale --gw-* schema that site-cluster.css and hotspot-finder.css
 * reference — those tokens don't exist, so SC/HF render on their
 * hardcoded fallbacks (SC's teal is the fallback #0d9488, not a
 * token). Filed in followups: reconcile SC/HF onto the real tokens.
 *
 * Primary action uses --color-action-primary (#1f2937, near-black)
 * per the design system — which is also the owner's requested button
 * treatment (2026-08-13). Fallbacks below mirror the token values
 * verbatim so a missing tokens file degrades to the same look.
 *
 * Button/label size-and-weight rhythm matches SC/HF (13px / 600
 * buttons, 12px uppercase section labels) so the tool reads as the
 * same product.
 */

.bv-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-primary, 'Poppins', system-ui, sans-serif);
}

/* ---- mode toggle ---- */
.bv-mode-row { display: flex; gap: 8px; }
.bv-mode-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border-default, #dde2ea);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-surface, #ffffff);
    color: var(--color-text-primary, #1a2233);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s ease),
                border-color var(--transition-fast, 0.15s ease);
}
.bv-mode-btn.bv-mode-active {
    background: var(--color-action-primary, #1f2937);
    border-color: var(--color-action-primary, #1f2937);
    color: var(--color-action-text, #ffffff);
}

/* ---- form bits ---- */
.bv-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #4a5568);
}
.bv-select,
.bv-input {
    padding: 6px 8px;
    border: 1px solid var(--color-border-default, #dde2ea);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-surface, #ffffff);
    color: var(--color-text-primary, #1a2233);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.bv-select:focus,
.bv-input:focus {
    outline: none;
    border-color: var(--color-border-strong, #c4ccd8);
}

/* ---- buttons ---- */
.bv-btn {
    align-self: flex-start;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-action-primary, #1f2937);
    color: var(--color-action-text, #ffffff);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.bv-btn:hover { filter: brightness(1.25); }
.bv-btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.bv-btn-primary {
    background: var(--color-action-primary, #1f2937);
    color: var(--color-action-text, #ffffff);
}
.bv-btn-secondary {
    background: transparent;
    color: var(--color-text-primary, #1a2233);
    border: 1px solid var(--color-border-default, #dde2ea);
}
.bv-btn-secondary:hover {
    filter: none;
    border-color: var(--color-border-strong, #c4ccd8);
}

/* ---- site result list ---- */
.bv-site-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border-default, #dde2ea);
    border-radius: var(--radius-sm, 6px);
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface, #ffffff);
}
.bv-site-item {
    text-align: left;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle, #e8ecf2);
    background: transparent;
    color: var(--color-text-primary, #1a2233);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.bv-site-item:last-child { border-bottom: 0; }
.bv-site-item:hover { background: var(--color-bg-muted, #f0f3f8); }

/* ---- detail table (step 2) ---- */
.bv-detail {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}
.bv-detail th {
    text-align: left;
    padding: 4px 12px 4px 0;
    color: var(--color-text-tertiary, #8a94a6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: top;
}
.bv-detail td {
    padding: 4px 0;
    color: var(--color-text-primary, #1a2233);
}

/* ---- misc ---- */
/* ---- radius-ring toggles ---- */
.bv-ring-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-primary, #1a2233);
    padding: 3px 0;
    cursor: pointer;
}
.bv-ring-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full, 999px);
}

.bv-summary { font-size: 13px; color: var(--color-text-primary, #1a2233); }
.bv-muted   { font-size: 12px; color: var(--color-text-tertiary, #8a94a6); }
/* Truncation guidance — an instruction, not an incidental count, so
   body size and secondary (not tertiary) color (owner legibility
   request 2026-09-04). */
.bv-list-hint {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary, #4a5568);
    margin-top: 2px;
}
.bv-hidden  { display: none; }