/* =====================================================
   BLANCORE — Interactive article widgets.

   Loaded by blog.php ONLY on posts that declare a 'widget' key in
   blog-data.php. Added 2026-08-08.

   WHY THIS EXISTS: every in-article graphic on this blog is a flat PNG
   rendered on a hardcoded #0F1117 background, so none of them respond to
   the light/dark toggle in js/theme.js, and none of them contain text a
   screen reader or a crawler can read. Everything below is built from the
   custom properties in style.css instead, so the widgets follow the theme
   for free and every label stays real, selectable text.

   All classes use the bc-w- prefix to stay clear of the site's .post-*
   (blog.css) and .calc-* (tools.css) namespaces.
   ===================================================== */

.bc-w {
    /* Status colours. style.css has --color-green but no amber/red, and
       adding them there would touch every page — so they're scoped here. */
    --bcw-ok:   var(--color-green);
    --bcw-warn: #F59E0B;
    --bcw-bad:  #EF4444;
    --bcw-ok-bg:   rgba(34, 197, 94, 0.12);
    --bcw-warn-bg: rgba(245, 158, 11, 0.12);
    --bcw-bad-bg:  rgba(239, 68, 68, 0.12);

    background: var(--color-surface);
    border: 1px solid var(--color-border-bright);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-glow);
}

/* The greens and ambers above are tuned for the dark default; on the light
   theme they need darkening to stay legible on white. */
[data-theme="light"] .bc-w {
    --bcw-ok:   #16A34A;
    --bcw-warn: #B45309;
    --bcw-bad:  #DC2626;
    --bcw-ok-bg:   rgba(22, 163, 74, 0.10);
    --bcw-warn-bg: rgba(180, 83, 9, 0.10);
    --bcw-bad-bg:  rgba(220, 38, 38, 0.10);
}

/* --- Resets: .post-body in blog.css styles every p / a / ul in the
   article, and those rules would otherwise leak into the widget. -------- */
.bc-w p,
.bc-w li,
.bc-w label,
.bc-w span,
.bc-w button {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}
.bc-w ul,
.bc-w ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-size: inherit;
}
.bc-w li { margin-bottom: 0; }
.bc-w a { text-decoration: none; font-weight: 600; color: var(--color-primary); }
.bc-w a:hover { text-decoration: underline; opacity: 1; }
.bc-w strong { color: var(--color-text); }

/* --- Head ------------------------------------------- */
.bc-w-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.bc-w-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--color-text);
    margin: 0 0 6px;
}
.bc-w-sub {
    font-size: 0.9rem !important;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm) !important;
}

/* --- Controls --------------------------------------- */
.bc-w-controls {
    display: grid;
    gap: 12px;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.bc-w-q {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    border: 0;
    padding: 0;
    margin: 0;
}
.bc-w-q > .bc-w-qlabel {
    flex: 1 1 260px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-text);
    padding: 0;
}

/* Segmented control. Real radio inputs kept in the tab order (opacity, not
   display:none) so arrow keys and screen readers work with no ARIA. */
.bc-w-seg {
    display: inline-flex;
    flex: 0 0 auto;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: 3px;
}
.bc-w-seg input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.bc-w-seg label {
    display: block;
    cursor: pointer;
    user-select: none;
    font-size: 0.84rem !important;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 6px 16px;
    border-radius: 100px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.bc-w-seg label:hover { color: var(--color-text); }
.bc-w-seg input:checked + label {
    background: var(--color-primary);
    color: #fff !important;
}
.bc-w-seg input:focus-visible + label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Stage (the visual bit) ------------------------- */
.bc-w-stage { padding: var(--space-sm) 0 0; }

/* --- Verdict ---------------------------------------- */
.bc-w-verdict {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 14px 16px;
    margin-top: var(--space-sm);
}
.bc-w-verdict.is-ok   { border-left-color: var(--bcw-ok); }
.bc-w-verdict.is-warn { border-left-color: var(--bcw-warn); }
.bc-w-verdict.is-bad  { border-left-color: var(--bcw-bad); }
.bc-w-verdict-icon { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.bc-w-verdict-body strong { display: block; color: var(--color-text); margin-bottom: 3px; font-size: 1rem; }
.bc-w-verdict-body p { font-size: 0.9rem !important; }

/* --- Foot ------------------------------------------- */
.bc-w-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px var(--space-sm);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-sm);
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.bc-w-note {
    flex: 1 1 300px;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    color: var(--color-muted) !important;
}
.bc-w-note a { font-size: inherit; font-weight: 600; }
.bc-w-reset {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.72rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: none;
    border: 1px solid var(--color-border-bright);
    border-radius: 100px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.bc-w-reset:hover { border-color: var(--color-primary); color: var(--color-primary); }
.bc-w-reset:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }


/* =====================================================
   WIDGET 1 — Fit Finder (ai-agent-vs-chatbot-vs-automation)
   Three bars race as the reader answers.
   ===================================================== */
.bc-w-bars { display: grid; gap: 16px; }
.bc-w-bar-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.bc-w-bar-name {
    font-size: 0.98rem !important;
    font-weight: 700;
    color: var(--color-text) !important;
}
.bc-w-bar-tag {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.63rem !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary) !important;
    background: var(--color-primary-glow);
    border-radius: 100px;
    padding: 3px 9px;
    margin-left: 8px;
    vertical-align: middle;
}
.bc-w-bar.is-win .bc-w-bar-tag { display: inline-block; }
.bc-w-bar-pct {
    font-family: var(--font-mono);
    font-size: 0.95rem !important;
    font-weight: 600;
    color: var(--color-text-secondary) !important;
    font-variant-numeric: tabular-nums;
}
.bc-w-bar.is-win .bc-w-bar-pct { color: var(--color-primary) !important; }
.bc-w-bar-track {
    height: 12px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    overflow: hidden;
}
.bc-w-bar-fill {
    display: block;
    height: 100%;
    border-radius: 100px;
    background: var(--color-muted);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.bc-w-bar.is-win .bc-w-bar-fill {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.bc-w-bar-note { font-size: 0.83rem !important; margin-top: 6px !important; }


/* =====================================================
   WIDGET 2 — Data Journey (what-happens-to-your-data-when-you-use-ai)
   A five-hop pipeline whose lights change with the settings.
   ===================================================== */
.bc-w-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.bc-w-node {
    position: relative;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 8px;
    text-align: center;
    transition: border-color 0.3s, background 0.3s;
}
/* Connector arrows sit in the grid gap, drawn on the node itself so the
   markup stays a clean list of five real items. */
.bc-w-node::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    width: 8px;
    height: 2px;
    background: var(--color-border-bright);
    transition: background 0.3s;
}
.bc-w-node:last-child::after { display: none; }
.bc-w-node.is-ok   { border-color: var(--bcw-ok);   background: var(--bcw-ok-bg); }
.bc-w-node.is-warn { border-color: var(--bcw-warn); background: var(--bcw-warn-bg); }
.bc-w-node.is-bad  { border-color: var(--bcw-bad);  background: var(--bcw-bad-bg); }
.bc-w-node.is-warn::after { background: var(--bcw-warn); }
.bc-w-node.is-bad::after  { background: var(--bcw-bad); }

.bc-w-node-dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 auto 8px;
    background: var(--color-muted);
    transition: background 0.3s, box-shadow 0.3s;
}
.bc-w-node.is-ok   .bc-w-node-dot { background: var(--bcw-ok);   box-shadow: 0 0 0 4px var(--bcw-ok-bg); }
.bc-w-node.is-warn .bc-w-node-dot { background: var(--bcw-warn); box-shadow: 0 0 0 4px var(--bcw-warn-bg); }
.bc-w-node.is-bad  .bc-w-node-dot { background: var(--bcw-bad);  box-shadow: 0 0 0 4px var(--bcw-bad-bg); }

.bc-w-node-name {
    display: block;
    font-size: 0.82rem !important;
    font-weight: 700;
    line-height: 1.25 !important;
    color: var(--color-text) !important;
    margin-bottom: 3px;
}
.bc-w-node-state {
    display: block;
    font-size: 0.71rem !important;
    line-height: 1.35 !important;
    color: var(--color-text-secondary) !important;
}

/* Findings list under the pipeline — the plain-text version of the lights. */
.bc-w-findings { display: grid; gap: 8px; margin-top: var(--space-sm); }
.bc-w-finding {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.87rem !important;
    line-height: 1.5 !important;
}
.bc-w-finding::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 7px;
    background: var(--color-muted);
}
.bc-w-finding.is-ok::before   { background: var(--bcw-ok); }
.bc-w-finding.is-warn::before { background: var(--bcw-warn); }
.bc-w-finding.is-bad::before  { background: var(--bcw-bad); }


/* =====================================================
   WIDGET 3 — Task Triage (which-tasks-should-ai-automate-first)
   Tap the tasks you recognise; they plot on value x effort.
   ===================================================== */
.bc-w-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.bc-w-chip {
    font-family: inherit;
    font-size: 0.82rem !important;
    font-weight: 600;
    color: var(--color-text-secondary) !important;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    text-align: left;
}
.bc-w-chip:hover { border-color: var(--color-border-bright); color: var(--color-text) !important; }
.bc-w-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bc-w-chip[aria-pressed="true"] {
    background: var(--color-primary-glow);
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
}

.bc-w-plot {
    position: relative;
    height: 300px;
    margin: 6px 0 0 30px;
    border-left: 1px solid var(--color-border-bright);
    border-bottom: 1px solid var(--color-border-bright);
}
/* Quadrant dividers */
.bc-w-plot::before,
.bc-w-plot::after {
    content: '';
    position: absolute;
    background: var(--color-border);
}
.bc-w-plot::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.bc-w-plot::after  { top: 50%; left: 0; right: 0; height: 1px; }

.bc-w-quad {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.66rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted) !important;
    pointer-events: none;
}
.bc-w-quad-tl { top: 8px;    left: 10px; }
.bc-w-quad-tr { top: 8px;    right: 10px; }
.bc-w-quad-bl { bottom: 8px; left: 10px; }
.bc-w-quad-br { bottom: 8px; right: 10px; }
.bc-w-quad-tl { color: var(--color-primary) !important; }

.bc-w-axis {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.66rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted) !important;
}
/* translate BOTH axes before rotating, or the label's pre-rotation width
   keeps its left edge at -30px and the rotated text lands inside the plot. */
.bc-w-axis-y {
    left: -30px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
}
.bc-w-axis-x { bottom: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

.bc-w-dot {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-bright);
    color: var(--color-muted);
    opacity: 0.25;
    transform: scale(0.75);
    transition: opacity 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, color 0.3s;
}
.bc-w-dot.is-on {
    opacity: 1;
    transform: scale(1);
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.bc-w-dot.is-on.is-top {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 5px var(--color-primary-glow);
}

.bc-w-rank { display: grid; gap: 10px; margin-top: var(--space-md); }
.bc-w-rank-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.bc-w-rank-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bc-w-rank-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.72rem !important;
    font-weight: 600;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-bright);
    color: var(--color-text-secondary) !important;
}
.bc-w-rank-item.is-top .bc-w-rank-num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff !important;
}
.bc-w-rank-name { display: block; font-weight: 700; color: var(--color-text) !important; font-size: 0.92rem !important; }
.bc-w-rank-why  { display: block; font-size: 0.85rem !important; line-height: 1.5 !important; }
.bc-w-empty { font-size: 0.9rem !important; color: var(--color-muted) !important; }


/* =====================================================
   Responsive + motion
   ===================================================== */
@media (max-width: 700px) {
    .bc-w { padding: var(--space-sm); }

    /* Stack each question above its answer rather than squeezing them. */
    .bc-w-q { display: block; }
    .bc-w-q > .bc-w-qlabel { display: block; margin-bottom: 8px; }
    .bc-w-seg { display: flex; width: 100%; }
    .bc-w-seg label { flex: 1; text-align: center; padding: 8px 10px; }

    /* Pipeline turns into a vertical timeline; the connectors rotate with it. */
    .bc-w-flow { grid-template-columns: 1fr; gap: 12px; }
    .bc-w-node { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 14px; }
    .bc-w-node-dot { margin: 0; flex-shrink: 0; }
    .bc-w-node-name { margin-bottom: 1px; }
    .bc-w-node::after {
        top: auto;
        bottom: -12px;
        left: 21px;
        right: auto;
        width: 2px;
        height: 12px;
    }

    .bc-w-plot { height: 250px; }
    .bc-w-chip { font-size: 0.78rem !important; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .bc-w *,
    .bc-w *::before,
    .bc-w *::after { transition: none !important; }
}