/* Insights articles (SKILL-ASSET). Loaded on /insights/ pages only. Status colors pair with a shape so color is never the only cue. */
.fl-page {
  --fl-target: #327EA2;   /* logo blue: circle */
  --fl-stopped: #C4660A;  /* burnt amber: square */
  --fl-unclear: #7A868F;  /* slate grey: diamond */
  --fl-well: #6B4FA0;     /* muted purple: triangle */
}

/* Hero */
.fl-hero { background: linear-gradient(160deg, var(--color-secondary) 0%, #173f55 100%); color: var(--color-text-light); padding: 28px 0 44px; position: relative; overflow: hidden; }
.fl-hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 191, 156, 0.28), transparent 70%); pointer-events: none; }
.fl-hero .breadcrumbs a, .fl-hero .breadcrumbs span { color: rgba(255, 255, 255, 0.85); }
.fl-hero h1 { color: var(--color-text-light); max-width: 900px; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; margin: 6px 0 14px; }
.fl-dek { font-size: 1.12rem; max-width: 760px; color: rgba(255, 255, 255, 0.92); margin-bottom: 26px; }
.fl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 980px; position: relative; z-index: 1; }
.fl-stat { display: flex; flex-direction: column; gap: 4px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 16px 18px; color: var(--color-text-light); text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; border-top: 4px solid; }
.fl-stat:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.fl-stat strong { font-family: var(--font-heading); font-size: 2.6rem; line-height: 1; }
.fl-stat span { font-size: 0.92rem; line-height: 1.35; }
.fl-s-target { border-top-color: #7cc3e3; }
.fl-s-stopped { border-top-color: #f2a65a; }
.fl-s-unclear { border-top-color: #c3ccd2; }
.fl-s-well { border-top-color: #b9a4e0; }
.fl-byline { color: rgba(255, 255, 255, 0.8); margin-top: 20px; font-size: 0.9rem; }

/* Takeaways */
.fl-takeaways { padding: 40px 0 8px; }
.fl-takeaways .container { background: var(--color-bg-soft); border-radius: var(--radius); padding: 26px 30px; border-left: 6px solid var(--color-calm); }
.fl-takeaways h2 { margin: 0 0 10px; font-size: 1.4rem; color: var(--color-calm-text); }
.fl-takeaways ul { margin: 0; padding-left: 1.1em; }
.fl-takeaways li { margin: 8px 0; }

/* Map */
.fl-map-section { padding: 44px 0 20px; }
.fl-map-section h2 { margin-bottom: 6px; }
.fl-lead { color: var(--color-text-muted); max-width: 720px; }
.fl-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin: 18px 0; }
.fl-search { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.9rem; }
.fl-search select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); min-width: 220px; }
.fl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-chip { font: inherit; font-size: 0.88rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fl-chip i { width: 11px; height: 11px; display: inline-block; }
.fl-c-target i { background: var(--fl-target); border-radius: 50%; }
.fl-c-stopped i { background: var(--fl-stopped); border-radius: 2px; }
.fl-c-unclear i { background: var(--fl-unclear); transform: rotate(45deg); width: 9px; height: 9px; }
.fl-c-well i { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--fl-well); }
.fl-chip.is-on { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-text-light); }
.fl-chip:focus-visible, .fl-dot:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.fl-map-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.fl-map { margin: 0; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.fl-map svg { width: 100%; height: auto; display: block; }
.fl-map figcaption { font-size: 0.8rem; color: var(--color-text-muted); padding: 8px 6px 4px; }
.fl-county { fill: var(--color-bg-blue); stroke: #9fc1d3; stroke-width: 1.5; stroke-linejoin: round; }
.fl-county:nth-of-type(2n) { fill: #f3f8f5; }
.fl-county-label { font: 700 13px var(--font-heading); fill: #9ab3c1; letter-spacing: 0.12em; text-anchor: middle; pointer-events: none; }
.fl-dot { cursor: pointer; transition: opacity 0.2s ease; }
.fl-dot .fl-hit { fill: transparent; stroke: none; }
.fl-dot circle:not(.fl-office-ring):not(.fl-hit), .fl-dot rect, .fl-dot path { stroke: #fff; stroke-width: 2; transition: transform 0.15s ease; }
.fl-d-target circle:not(.fl-hit):not(.fl-office-ring) { fill: var(--fl-target); }
.fl-d-stopped rect { fill: var(--fl-stopped); }
.fl-d-unclear path { fill: var(--fl-unclear); }
.fl-d-well path { fill: var(--fl-well); }
.fl-office-ring { fill: none; stroke: var(--color-accent); stroke-width: 4; }
.fl-dot text { font: 600 11px var(--font-body); fill: var(--color-text); paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; opacity: 0.85; }
.fl-dot:hover circle:not(.fl-office-ring):not(.fl-hit), .fl-dot:hover rect, .fl-dot:hover path, .fl-dot.is-active circle:not(.fl-office-ring):not(.fl-hit), .fl-dot.is-active rect, .fl-dot.is-active path { transform: scale(1.45); }
.fl-dot.is-active text, .fl-dot:hover text { font-size: 13px; font-weight: 700; opacity: 1; }
.fl-dot.is-dim { opacity: 0.14; }

.fl-card { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 18px; position: sticky; top: 96px; border-top: 6px solid var(--color-secondary); }
.fl-card h3 { margin: 4px 0 12px; font-size: 1.5rem; }
.fl-card dl { margin: 0; display: grid; gap: 10px; }
.fl-card dl div { display: grid; grid-template-columns: 118px 1fr; gap: 8px; font-size: 0.95rem; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
.fl-card dt { color: var(--color-text-muted); font-size: 0.85rem; }
.fl-card dd { margin: 0; font-weight: 500; }
.fl-card small { color: var(--color-text-muted); font-weight: 400; }
.fl-card-status { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; margin: 0; }
.fl-cs-target { background: var(--fl-target); }
.fl-cs-stopped { background: var(--fl-stopped); }
.fl-cs-unclear { background: var(--fl-unclear); }
.fl-cs-well { background: var(--fl-well); }
.fl-card-note { font-size: 0.92rem; background: var(--color-bg); border-radius: 8px; padding: 10px 12px; margin: 14px 0 6px; }
.fl-card-src { font-size: 0.92rem; margin: 8px 0 0; }
.fl-card-empty { color: var(--color-text-muted); margin: 0; }
.fl-legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.88rem; color: var(--color-text-muted); }
.fl-legend li { display: flex; align-items: center; gap: 8px; }
.fl-legend .fl-d-target circle { fill: var(--fl-target); }

/* Body copy */
.fl-body { padding-top: 26px; padding-bottom: 26px; }
.fl-body h2 { margin-top: 1.5em; }
.fl-body table { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: 0.95rem; }
.fl-body th, .fl-body td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.fl-body thead th { background: var(--color-secondary); color: var(--color-text-light); }
.fl-body tbody th { background: var(--color-bg-soft); color: var(--color-calm-text); }
.fl-body td { background: var(--color-surface); }

/* Bar chart */
.fl-chart-section { background: var(--color-bg-blue); padding: 36px 0 40px; margin-top: 20px; }
.fl-bars { margin: 18px 0 0; display: grid; gap: 9px; }
.fl-bar-row { display: grid; grid-template-columns: 190px 1fr 112px; gap: 12px; align-items: center; font-size: 0.92rem; }
.fl-bar-name { font-weight: 500; }
.fl-bar-track { position: relative; height: 22px; background: var(--color-surface); border-radius: 6px; overflow: visible; }
.fl-bar { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #5aa6c8, var(--fl-target)); border-radius: 6px; animation: fl-grow 0.9s ease-out both; }
.fl-bar.is-low { background: var(--fl-unclear); }
.fl-bar.is-zero { width: 4px; background: var(--fl-stopped); }
.fl-target { position: absolute; top: -5px; bottom: -5px; left: 70%; border-left: 2px dashed var(--color-text); }
.fl-bar-row:first-child .fl-target::before { content: "0.7 target"; position: absolute; top: -20px; left: -30px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.fl-bar-row:first-child { margin-top: 16px; }
.fl-bar-val { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-bars figcaption { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 6px; }
@keyframes fl-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .fl-bar { animation: none; } .fl-stat, .fl-dot * { transition: none; } }

/* Scale strip */
.fl-scale { position: relative; margin: 76px 8px 112px; height: 14px; }
.fl-scale-bar { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #e9eef1 0%, #7cc3e3 17.5%, #f2c14e 37.5%, #f2a65a 50%, #d9534f 100%); }
.fl-mark { position: absolute; left: var(--x); top: 22px; transform: translateX(-50%); font-size: 0.76rem; line-height: 1.25; text-align: center; width: 116px; color: var(--color-text-muted); }
.fl-mark::before { content: ""; position: absolute; left: 50%; top: -12px; height: 10px; border-left: 2px solid var(--color-text); }
.fl-mark b { display: block; font-size: 0.95rem; color: var(--color-text); }
.fl-mark.fl-up { top: auto; bottom: 22px; }
.fl-mark.fl-up::before { top: auto; bottom: -12px; }
.fl-mark.fl-key b { color: var(--fl-target); font-size: 1.1rem; }
.fl-mark:first-of-type { transform: none; text-align: left; }
.fl-mark:last-of-type { transform: translateX(-100%); text-align: right; }

/* Two-column comparison */
.fl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0; }
.fl-compare > div { background: var(--color-surface); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); border-top: 5px solid var(--fl-target); }
.fl-compare > div + div { border-top-color: var(--fl-stopped); }
.fl-compare h3 { margin: 0 0 6px; font-size: 1.1rem; }
.fl-compare ul { margin: 0; padding-left: 1.1em; font-size: 0.95rem; }

/* Timeline */
.fl-timeline-section { background: var(--color-bg-soft); padding: 36px 0 30px; margin-top: 20px; }
.fl-timeline { list-style: none; margin: 20px 0 0; padding: 0 0 0 26px; border-left: 3px solid var(--color-border); }
.fl-timeline li { position: relative; padding: 0 0 18px 14px; }
.fl-timeline li::before { content: ""; position: absolute; left: -34px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--color-bg-soft); }
.fl-timeline li.is-local::before, .fl-key-line .is-local::before { background: var(--fl-stopped); }
.fl-timeline li.is-national::before, .fl-key-line .is-national::before { background: var(--color-secondary); }
.fl-timeline time { font-weight: 700; font-family: var(--font-heading); color: var(--color-secondary); }
.fl-timeline p { margin: 2px 0 0; }
.fl-key-line { font-size: 0.85rem; color: var(--color-text-muted); display: flex; gap: 18px; }
.fl-key-line span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* Steps, CTA, sources */
.fl-steps { counter-reset: s; list-style: none; padding: 0; }
.fl-steps li { counter-increment: s; position: relative; padding: 4px 0 12px 48px; }
.fl-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); color: var(--color-cta-text); font-weight: 700; display: grid; place-items: center; }
.fl-cta { background: var(--color-secondary); color: var(--color-text-light); border-radius: var(--radius); padding: 24px 26px; margin: 26px 0; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fl-cta p { margin: 0; max-width: 520px; }
.fl-cta a:not(.btn-primary) { color: #bfe3f2; }
.fl-sources { font-size: 0.88rem; padding-left: 1.3em; }
.fl-sources li { margin: 5px 0; }
.fl-method { font-size: 0.88rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; }

@media (max-width: 900px) {
  .fl-stats { grid-template-columns: repeat(2, 1fr); }
  .fl-map-wrap { grid-template-columns: 1fr; }
  .fl-card { position: static; }
  .fl-compare { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fl-bar-row { grid-template-columns: 1fr 100px; }
  .fl-bar-name { grid-column: 1 / -1; margin-bottom: -6px; }
  .fl-dot text { display: none; }
  .fl-dot.is-active text { display: block; font-size: 22px; }
  .fl-dot circle:not(.fl-office-ring):not(.fl-hit), .fl-dot rect, .fl-dot path { transform: scale(1.7); }
  .fl-dot.is-active circle:not(.fl-office-ring):not(.fl-hit), .fl-dot.is-active rect, .fl-dot.is-active path { transform: scale(2.3); }
  .fl-hit { r: 26px; }
  .fl-mark { width: 84px; font-size: 0.7rem; }
  .fl-scale { margin: 70px 4px 100px; }
  .fl-stat strong { font-size: 2.1rem; }
}
@media print { .fl-hero { background: none; color: var(--color-text); } .fl-hero h1 { color: var(--color-text); } }