/* =============================================================================
   Bow-Tie SVG Component Styles — v3 (Tapering Bands + Thin Barriers)
   VERSION: 2026-02-13-v3
   ============================================================================= */

/* Container scoped (NO html/body rules — we share the NiceGUI document) */
[data-wbt-id] {
    width: 100%;
    position: relative;  /* anchor for tooltip overlay */
}

[data-wbt-id] svg {
    display: block;
    width: 100%;
}

/* -------------------------------------------------------------------------
   Hover effects — cause / consequence boxes
   ------------------------------------------------------------------------- */
.wbt-box {
    cursor: pointer;
    transition: filter 0.12s ease;
}

.wbt-box:hover {
    filter: brightness(1.06) drop-shadow(0 0 4px rgba(49, 130, 206, 0.3));
}

.wbt-box.consequence:hover {
    filter: brightness(1.06) drop-shadow(0 0 4px rgba(229, 62, 62, 0.3));
}

/* -------------------------------------------------------------------------
   Hover effects — top event (hazard node)
   ------------------------------------------------------------------------- */
.wbt-top-event {
    cursor: pointer;
    transition: filter 0.12s ease;
}

.wbt-top-event:hover {
    filter: brightness(1.08) drop-shadow(0 0 6px rgba(214, 158, 46, 0.4));
}

/* -------------------------------------------------------------------------
   The hazard box above the top event (W2b-1): a click opens the risk
   ------------------------------------------------------------------------- */
.wbt-hazard-box {
    cursor: pointer;
    transition: filter 0.12s ease;
}

.wbt-hazard-box:hover {
    filter: drop-shadow(0 0 5px rgba(214, 158, 46, 0.4));
}

/* -------------------------------------------------------------------------
   The scroll chips, "N more above / below" (W2b-2)
   ------------------------------------------------------------------------- */
.wbt-scroll-chip {
    cursor: pointer;
    outline: none;
}

.wbt-scroll-chip:hover rect {
    fill: #F1F5F9;
    stroke: #64748B;
}

/* The keyboard's focus ring, drawn on the pill itself (an SVG group has no box to outline). */
.wbt-scroll-chip:focus-visible rect {
    stroke: #D69E2E;
    stroke-width: 2;
}

@media print {
    .wbt-scroll-chip { display: none; }
}

/* -------------------------------------------------------------------------
   Hover effects — control barriers
   ------------------------------------------------------------------------- */
.wbt-control {
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.12s ease;
}

.wbt-control:hover {
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}

/* -------------------------------------------------------------------------
   Selection glow (applied via JS class toggle)
   ------------------------------------------------------------------------- */
.wbt-box.selected {
    filter: drop-shadow(0 0 8px rgba(214, 158, 46, 0.7));
}

.wbt-top-event.selected {
    filter: drop-shadow(0 0 10px rgba(214, 158, 46, 0.8));
}

.wbt-control.selected {
    filter: drop-shadow(0 0 6px rgba(214, 158, 46, 0.7));
}

/* -------------------------------------------------------------------------
   Text styling — match app brand fonts
   ------------------------------------------------------------------------- */
.wbt-text {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
    pointer-events: none;  /* Text should not block clicks on parent element */
}

.wbt-title-text {
    font-family: 'Playfair Display', Georgia, serif;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Tooltip (HTML overlay positioned by JS)
   ------------------------------------------------------------------------- */
.wbt-tooltip {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    background: #1E293B;
    color: #F1F5F9;
    border-radius: 10px;
    padding: 12px 16px;
    width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border: 1px solid #E2E8F0;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    transition: opacity 0.12s ease;
}

.wbt-tooltip-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.wbt-tooltip-row {
    opacity: 0.8;
}

.wbt-tooltip-row strong {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   V04-49 (L-3, L-4) — a control is an icon that carries its number; its name
   is a callout where there is room
   ------------------------------------------------------------------------- */
.wbt-icon .wbt-icon-ring {
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* Selected, or one of the places a pointed-at control sits. */
.wbt-icon.selected .wbt-icon-ring,
.wbt-icon.same .wbt-icon-ring {
    opacity: 0.8;
}

.wbt-icon:hover,
.wbt-icon.selected {
    filter: none;
}

.wbt-icon .wbt-icon-body {
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
}

.wbt-callout {
    pointer-events: none;   /* a name never takes a click meant for the line under it */
}

.wbt-hazard-box.selected {
    filter: drop-shadow(0 0 8px rgba(214, 158, 46, 0.7));
}