/* ==========================================================================
   HEXNET Reporting Platform — design system
   --------------------------------------------------------------------------
   Tokens are lifted verbatim from the approved dashboard prototypes
   (assets/dashboard-prototypes). The prototypes were a fixed 1280px capture
   frame; this stylesheet keeps that as the maximum and adds breakpoints below.
   ========================================================================== */

:root {
    --navy: #032C44;
    --blue: #009FDA;
    --deepblue: #0A5A82;
    --midblue: #4FB8E5;
    --litblue: #8FD3EF;
    --paleblue: #C7E8F7;
    --green: #1E874B;
    --red: #B3261E;

    --ink: #1F2A33;
    --muted: #6B7783;
    --line: #E4E8EC;
    --cardline: #D9DDE2;
    --grid: #EDF0F2;
    --zebra: #F5F8FA;
    --track: #EEF2F4;
    --highlight: #EAF6FC;

    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --page-w: 1280px;
    --gutter: 14px;
    --radius: 6px;
    --tile-h: 230px;
    --kpi-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
html { -webkit-text-size-adjust: 100%; }

body {
    background: #fff;
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   APPLICATION BAR
   -------------------------------------------------------------------------- */
.appbar { background: var(--navy); color: #fff; }

.appbar-inner {
    max-width: var(--page-w); margin: 0 auto; padding: 0 20px; height: 48px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.appbar-brand { display: flex; align-items: baseline; gap: 7px; text-decoration: none; }
.appbar-mark { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.appbar-product { color: var(--midblue); font-size: 15px; font-weight: 400; }

.appbar-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.appbar-client {
    color: #fff; font-size: 12.5px; font-weight: 600;
    background: rgba(255,255,255,.12); border-radius: 3px; padding: 3px 9px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.appbar-user { color: #C7D6E0; font-size: 12.5px; white-space: nowrap; }
.appbar-signout { display: flex; }

/* --------------------------------------------------------------------------
   GLOBAL REPORTING-PERIOD SELECTOR
   Lives in the app bar so it is present on every dashboard. A light control on
   the navy bar; a styled native <select> so it stays fully keyboard- and
   screen-reader-accessible. The "Apply" button is the no-JavaScript fallback
   and is hidden once reporting.js wires change-to-submit.
   -------------------------------------------------------------------------- */
.period-picker { display: flex; align-items: center; gap: 8px; }
.period-picker-label { color: #C7D6E0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.period-picker-field { position: relative; display: inline-flex; }
.period-picker select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    font: inherit; font-size: 12.5px; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
    border-radius: 4px; padding: 5px 30px 5px 11px; line-height: 1.2; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.period-picker select:hover { background: rgba(255,255,255,.2); }
.period-picker select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* The native dropdown list renders on white, so force readable option colours. */
.period-picker select option { color: var(--ink); background: #fff; }
.period-picker-field::after {
    content: "\25BE"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--midblue); font-size: 11px; pointer-events: none;
}
.period-picker-apply {
    font: inherit; font-size: 12px; font-weight: 600; color: var(--navy);
    background: var(--midblue); border: 0; border-radius: 4px; padding: 6px 12px; cursor: pointer;
    transition: background .12s ease;
}
.period-picker-apply:hover { background: var(--litblue); }
.period-picker--js .period-picker-apply { display: none; }

.linkbutton {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--midblue); font: inherit; font-size: 12.5px; text-decoration: underline;
}
.linkbutton:hover { color: #fff; }

/* --------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */
.page { width: 100%; max-width: var(--page-w); margin: 0 auto; padding: 22px 20px 28px; }

.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.masthead-left { display: flex; align-items: baseline; gap: 18px; min-width: 0; flex-wrap: wrap; }
.page-title { color: var(--blue); font-size: 33px; font-weight: 700; letter-spacing: -.2px; line-height: 1; }

.context { color: var(--muted); font-size: 13px; line-height: 1.2; }
.context .sep { margin: 0 7px; color: #C4CDD3; }

/* Native-window badge beside the title, for modules that keep their own window. */
.native-window {
    align-self: center;
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; color: var(--deepblue);
    background: var(--highlight); border: 1px solid var(--paleblue);
    border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}

/* "Alternate measurement windows: …" line under a mixed-window page (Executive Overview). */
.alt-windows { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 10px 0 0; }
.alt-windows-label { font-weight: 600; color: var(--navy); margin-right: 4px; }

.brand { align-self: flex-start; }
.brand-name { color: var(--navy); font-size: 15px; font-weight: 700; white-space: nowrap; }

.masthead-rule { border-top: 1px solid var(--line); margin: 14px 0 0; }

/* --------------------------------------------------------------------------
   NAVIGATION TABS
   -------------------------------------------------------------------------- */
nav.tabs {
    display: flex; gap: 26px; padding: 10px 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs a {
    color: var(--navy); text-decoration: none; font-size: 15px; white-space: nowrap;
    padding-bottom: 2px; border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
}
nav.tabs a:hover { color: var(--blue); }
nav.tabs a.active { color: var(--blue); font-weight: 600; border-bottom-color: var(--blue); }

/* --------------------------------------------------------------------------
   KPI CARDS
   -------------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gutter); margin: 14px 0 12px; }
.kpi .cap {
    background: var(--navy); color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: .2px; text-align: center; padding: 5px 4px; border-radius: 3px;
}
.kpi .val {
    margin-top: 6px; min-height: var(--kpi-h); background: #fff;
    border: 1px solid var(--cardline); border-radius: var(--radius);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6px 4px;
}
.kpi .num { font-size: 33px; font-weight: 400; line-height: 1; color: var(--ink); text-align: center; }
.kpi .num.pos { color: var(--green); }
.kpi .sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; text-align: center; }

/* --------------------------------------------------------------------------
   TILE GRID
   -------------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.grid + .grid { margin-top: 12px; }

.tile {
    display: flex; flex-direction: column; height: var(--tile-h);
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.tile.span2 { grid-column: span 2; }
/* Long reference tables opt out of the uniform fixed height: the tile grows to its
   content and the page scrolls, so a reader can review the whole list (e.g. all 149
   tracked keywords) rather than a cramped inner scroll box. */
.tile.tall { height: auto; }
.tile.tall > .body { overflow: visible; }
.tile.tall .table-wrap { height: auto; overflow: visible; }
.tile > .head {
    background: var(--navy); color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: .2px; text-align: center; padding: 5px 4px;
}
.tile > .body { flex: 1; min-height: 0; padding: 11px 13px; overflow: hidden; }
.tile > .body.flush { padding: 0; }

.tile-empty { color: var(--muted); font-size: 12px; padding: 8px 0; text-align: center; }

/* --------------------------------------------------------------------------
   CHART: LINE
   -------------------------------------------------------------------------- */
svg.chart { display: block; width: 100%; height: 100%; }
.axlabel { fill: var(--muted); font-size: 9px; font-family: var(--font); }
.axlabel.end { fill: var(--navy); font-weight: 700; }

/* --------------------------------------------------------------------------
   CHART: HORIZONTAL BARS
   -------------------------------------------------------------------------- */
/*
   The label column is sized by content (max-content), not by a fixed guess, so labels
   are shown in full wherever there is room. --lab-max caps it so a very long label
   cannot squeeze the bar to nothing; wide tiles raise the cap because they have the
   space. Live prompt-category labels run to ~44 characters.
*/
.barlist {
    --lab-max: 132px;
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(60px, 1fr) auto;
    column-gap: 10px;
    row-gap: 16px;
    align-items: center;
    font-size: 11px;
}
.tile.span2 .barlist { --lab-max: 330px; }

/* Children become grid items so columns align across every row. */
.barrow { display: contents; }

.barlist .lab {
    max-width: var(--lab-max);
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barlist .track { position: relative; height: 15px; background: var(--track); border-radius: 2px; }
.barlist .fill { position: absolute; inset: 0 auto 0 0; background: var(--navy); border-radius: 2px; }
.barlist .fill.hi { background: var(--blue); }
.barlist .val {
    text-align: right; min-width: 42px;
    color: var(--muted); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   CHART: FUNNEL
   -------------------------------------------------------------------------- */
.funnel { display: flex; flex-direction: column; height: 100%; justify-content: center; gap: 1px; }
.fstage { display: flex; align-items: center; font-size: 11px; }
.fstage .fname { width: 92px; flex: 0 0 92px; color: var(--ink); }
.fstage .ftrack { flex: 1; display: flex; justify-content: center; }
.fstage .fbar { height: 20px; border-radius: 2px; }
.fstage .fmeta {
    width: 96px; flex: 0 0 96px; text-align: right;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.fstage .fmeta small { color: var(--muted); }
.farrow { margin: 0 96px 0 92px; text-align: center; color: #C4CDD3; font-size: 8px; line-height: 7px; }

/* --------------------------------------------------------------------------
   CHART: DISTRIBUTION
   -------------------------------------------------------------------------- */
.dist { display: flex; flex-direction: column; height: 100%; gap: 12px; }
.dist-bar { display: flex; height: 16px; border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
.dist-seg { display: block; height: 100%; }
.dist-legend { display: flex; flex-direction: column; gap: 7px; font-size: 11px; overflow: hidden; }
.dist-legend li { display: flex; align-items: center; gap: 8px; }
.dist-legend .dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; }
.dist-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-value { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dist-abs { color: var(--muted); margin-right: 6px; }

/* --------------------------------------------------------------------------
   TABLE
   -------------------------------------------------------------------------- */
.table-wrap { height: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
thead th {
    background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 600;
    text-align: left; padding: 6px 10px; position: sticky; top: 0;
}
th.r, td.r { text-align: right; }
tbody td {
    padding: 6px 10px; color: var(--ink);
    border-bottom: 1px solid #EEF1F3; font-variant-numeric: tabular-nums;
}
tbody td.txt { font-variant-numeric: normal; }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.emphasis td { background: var(--highlight); font-weight: 700; color: var(--navy); }

/* --------------------------------------------------------------------------
   SIGN IN
   -------------------------------------------------------------------------- */
.auth { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.auth-card {
    width: 100%; max-width: 380px; background: #fff;
    border: 1px solid var(--cardline); border-radius: var(--radius);
    padding: 30px 30px 26px;
}
.auth-brand { display: flex; align-items: baseline; gap: 7px; margin-bottom: 22px; }
.auth-brand .appbar-mark { color: var(--navy); }
.auth-brand .appbar-product { color: var(--blue); }
.auth-title { color: var(--navy); font-size: 22px; font-weight: 700; }
.auth-sub { color: var(--muted); font-size: 13px; margin: 4px 0 20px; }
.auth-foot { color: var(--muted); font-size: 11.5px; }

.auth-error {
    background: #FDECEA; border: 1px solid #F5C6C2; color: var(--red);
    border-radius: 4px; padding: 9px 11px; font-size: 12.5px; margin-bottom: 16px;
}
.auth-error ul { margin: 0; }
.auth-error:empty { display: none; }

.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.field-input {
    width: 100%; font: inherit; font-size: 14px; color: var(--ink);
    padding: 9px 11px; border: 1px solid var(--cardline); border-radius: 4px; background: #fff;
}
.field-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0,159,218,.15); }
.field-error { display: block; color: var(--red); font-size: 11.5px; margin-top: 4px; }
.field-error:empty { display: none; }

.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); margin-bottom: 18px; }

.btn-primary {
    display: inline-block; width: 100%; text-align: center;
    background: var(--blue); color: #fff; border: 0; border-radius: 4px;
    padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background .12s ease;
}
.btn-primary:hover { background: #0089BC; }

/* --------------------------------------------------------------------------
   NOTICE / ERROR PAGES
   -------------------------------------------------------------------------- */
.notice { max-width: 460px; margin: 60px auto; text-align: center; }
.notice-code { color: var(--blue); font-size: 54px; font-weight: 700; line-height: 1; }
.notice-title { color: var(--navy); font-size: 21px; font-weight: 700; margin: 10px 0 8px; }
.notice-detail { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-bottom: 22px; }
.notice-meta { color: var(--muted); font-size: 11.5px; margin-top: 16px; word-break: break-all; }
.notice .btn-primary { width: auto; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   The prototypes were a fixed 1280px capture frame. Below that the KPI strip
   and tile grid step down, and tiles release their fixed height so content is
   never clipped on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .tile.span2 { grid-column: span 2; }
    .page-title { font-size: 28px; }
}

@media (max-width: 760px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .grid { grid-template-columns: 1fr; }
    .tile.span2 { grid-column: span 1; }
    .tile { height: auto; min-height: var(--tile-h); }

    .page { padding: 16px 14px 24px; }
    .page-title { font-size: 24px; }
    .masthead { flex-direction: column; align-items: flex-start; gap: 8px; }

    .appbar-user { display: none; }
    .period-picker-label { display: none; }
    .barlist { --lab-max: 96px; }
    .fstage .fname { width: 74px; flex-basis: 74px; }
    .fstage .fmeta { width: 86px; flex-basis: 86px; }
    .farrow { margin: 0 86px 0 74px; }
}

@media (max-width: 420px) {
    .kpis { grid-template-columns: 1fr; }
    .kpi .num { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   DATA PROVENANCE CHIP
   Live figures and sample figures must never be confusable.
   -------------------------------------------------------------------------- */
.masthead-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.chip-live {
    color: #10633B; background: #E6F6EE; border-color: #BFE6D2;
}
.chip-live .chip-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 0 rgba(30,135,75,.55);
    animation: chip-pulse 2.4s ease-out infinite;
}
.chip-sample {
    color: #7A5B12; background: #FDF4E0; border-color: #EFD9A8;
}
/* Integration In Progress — amber, actively being connected. */
.chip-progress {
    color: #8A5B0A; background: #FDF4E0; border-color: #EFD9A8;
}
/* Planned — neutral grey, deliberately quiet. */
.chip-planned {
    color: #5B5F66; background: #F1F3F5; border-color: #D9DDE2;
}

/* Unmissable, but calm — this is a client-facing screen, not an error. */
.notice-bar {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 12px 0 0; padding: 10px 14px;
    background: #FDF4E0; border: 1px solid #EFD9A8; border-left: 3px solid #D9A441;
    border-radius: 4px; font-size: 12.5px; color: #6B5312; line-height: 1.5;
}
.notice-bar strong { color: #5A4409; }
.notice-bar-icon { color: #D9A441; font-size: 9px; line-height: 1.7; flex: 0 0 auto; }

@keyframes chip-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(30,135,75,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(30,135,75,0); }
    100% { box-shadow: 0 0 0 0 rgba(30,135,75,0); }
}

/* --------------------------------------------------------------------------
   POLISH — depth, motion, affordances
   Everything here is additive: it sharpens the approved design without
   altering the locked tokens.
   -------------------------------------------------------------------------- */

/* Tiles lift slightly on hover so the grid reads as inspectable, not static. */
.tile {
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    will-change: transform;
}
.tile:hover {
    border-color: var(--cardline);
    box-shadow: 0 6px 18px -6px rgba(3, 44, 68, .18), 0 2px 4px -2px rgba(3, 44, 68, .10);
    transform: translateY(-1px);
}

/* KPI cards get the same treatment, a touch quieter. */
.kpi .val { transition: box-shadow .18s ease, border-color .18s ease; }
.kpi:hover .val {
    border-color: var(--midblue);
    box-shadow: 0 4px 12px -5px rgba(3, 44, 68, .18);
}
.kpi .num { transition: color .18s ease; }
.kpi:hover .num { color: var(--navy); }
.kpi:hover .num.pos { color: var(--green); }

/* Bars grow from zero on first paint — it reads as the data arriving. */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.barlist .fill,
.fstage .fbar,
.dist-seg {
    transform-origin: left center;
    animation: bar-grow .5s cubic-bezier(.22, .61, .36, 1) both;
}
.barlist .track { overflow: hidden; }
.barlist .track:hover .fill { filter: brightness(1.08); }
.barlist .fill { transition: filter .15s ease; }

/* Chart lines draw in. */
@keyframes line-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
svg.chart polyline {
    stroke-dasharray: 1200;
    animation: line-draw 1s ease-out both;
}
svg.chart polygon { animation: fade-in .8s ease-out both; }
svg.chart circle { animation: fade-in .5s ease-out both; animation-delay: .45s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Table rows respond to the pointer so long tables stay trackable. */
tbody tr { transition: background-color .12s ease; }
tbody tr:hover td { background: var(--highlight); }
tbody tr.emphasis:hover td { background: #DCEFFA; }

/* Distribution legend rows highlight with their segment. */
.dist-legend li { transition: color .12s ease; }
.dist-legend li:hover { color: var(--navy); }

/* Navigation: the underline slides rather than snapping. */
nav.tabs a { position: relative; padding-bottom: 4px; border-bottom-color: transparent; }
nav.tabs a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--blue); transform: scaleX(0); transform-origin: center;
    transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}
nav.tabs a:hover::after { transform: scaleX(1); }
nav.tabs a.active::after { transform: scaleX(1); }
nav.tabs a.active { border-bottom-color: transparent; }

/* Buttons and links get a consistent press affordance. */
.btn-primary { transition: background .12s ease, box-shadow .12s ease, transform .06s ease; }
.btn-primary:hover { box-shadow: 0 4px 12px -4px rgba(0, 159, 218, .45); }
.btn-primary:active { transform: translateY(1px); }

/* Empty tiles should look intentional, not broken. */
.tile-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-style: italic;
}

/* Respect a reader's motion preference — animation is decoration here. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .tile:hover { transform: none; }
    svg.chart polyline { stroke-dasharray: none; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
    @page { size: landscape; margin: 10mm; }
    .appbar, nav.tabs, .skip-link { display: none; }
    .tile { break-inside: avoid; box-shadow: none; transform: none; }
    .page { max-width: none; padding: 0; }
    .chip { border: 1px solid #999; }
    .barlist .fill, .fstage .fbar, .dist-seg, svg.chart polyline, svg.chart circle, svg.chart polygon {
        animation: none;
        stroke-dasharray: none;
        opacity: 1;
    }
}


/* ---- Executive Intelligence cards ------------------------------------- */
.intel { margin: 14px 0 6px; }
.intel-head {
  font-size: 12px; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.intel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .intel-grid { grid-template-columns: 1fr; } }
.intel-card {
  background: #fff; border: 1px solid var(--cardline); border-left: 4px solid var(--muted);
  border-radius: 6px; padding: 12px 14px;
}
.intel-opp { border-left-color: var(--blue); }
.intel-risk { border-left-color: var(--red); }
.intel-pos { border-left-color: var(--green); }
.intel-rec { border-left-color: var(--deepblue); }
.intel-insight { border-left-color: var(--navy); }
.intel-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 5px;
}
.intel-headline { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 5px; }
.intel-detail { font-size: 12px; color: var(--ink); line-height: 1.45; }
.intel-action { font-size: 12px; font-weight: 600; color: var(--deepblue); margin-top: 7px; }