/* Shared data briefings. Values and surfaces follow the Portexa theme tokens. */
.ni-data-insights {
  --ni-chart-primary: var(--tm-accent, var(--color-brand-secondary));
  --ni-chart-secondary: var(--tm-info, var(--color-info));
  --ni-chart-negative: var(--tm-down, var(--color-negative));
  min-width: 0;
  display: grid;
  gap: 1rem;
  margin-block: .25rem 1.15rem;
  color: var(--tm-text, var(--color-text-primary));
  font-variant-numeric: tabular-nums;
}
.ni-insight-heading { display: flex; justify-content: space-between; gap: 1rem 1.5rem; align-items: end; }
.ni-insight-intro { min-width: 0; max-width: 52rem; }
.ni-insight-eyebrow { display: block; margin-bottom: .25rem; color: var(--tm-accent); font-size: .61rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.ni-insight-heading h2 { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3; letter-spacing: -.025em; font-weight: 800; }
.ni-insight-heading p { margin: .35rem 0 0; color: var(--tm-muted); font-size: .75rem; line-height: 1.65; }
.ni-insight-scope { display: flex; flex-direction: column; align-items: end; flex-shrink: 0; gap: .35rem; max-width: 40%; text-align: right; }
.ni-insight-scope-label { padding: .3rem .6rem; border: 1px solid var(--tm-line); border-radius: 999px; background: var(--tm-bg); color: var(--tm-text-2); font-size: .65rem; font-weight: 700; overflow-wrap: anywhere; }
.ni-insight-scope small { color: var(--tm-muted); font-size: .62rem; line-height: 1.5; }
.ni-insight-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .65rem; margin: 0; }
.ni-insight-fact { position: relative; min-width: 0; padding: .85rem 1rem; border: 1px solid var(--tm-line); border-radius: 13px; background: var(--tm-bg); box-shadow: var(--tm-shadow); }
.ni-insight-fact::before { content: ''; position: absolute; width: 1.6rem; height: 3px; top: -1px; left: 1rem; border-radius: 0 0 3px 3px; background: var(--tm-accent); }
.ni-insight-fact.is-up::before { background: var(--tm-up); }
.ni-insight-fact.is-down::before { background: var(--tm-down); }
.ni-insight-fact.is-warn::before { background: var(--tm-warn); }
.ni-insight-fact.is-info::before { background: var(--tm-info); }
.ni-insight-fact dt { color: var(--tm-muted); font-size: .65rem; line-height: 1.45; font-weight: 700; }
.ni-insight-fact dd { margin: .35rem 0 0; font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.ni-insight-fact p { margin: .4rem 0 0; color: var(--tm-muted); font-size: .64rem; line-height: 1.5; }
.ni-insight-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: start; }
.ni-insight-chart { min-width: 0; overflow: hidden; }
.ni-insight-chart:only-child { grid-column: 1 / -1; }
.ni-insight-chart:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ni-chart-head { display: flex; justify-content: space-between; align-items: start; gap: .75rem; padding: 1rem 1rem .85rem; border-bottom: 1px solid var(--tm-line-soft); }
.ni-chart-head > div:first-child { min-width: 0; }
.ni-chart-head h3 { margin: 0; font-size: .87rem; font-weight: 800; line-height: 1.4; }
.ni-chart-head p { margin: .25rem 0 0; font-size: .72rem; color: var(--tm-muted); line-height: 1.6; }
.ni-chart-controls { display: inline-flex; padding: .2rem; gap: .15rem; flex-shrink: 0; border-radius: 8px; background: var(--tm-bg-sunk); }
.ni-chart-controls button { border: 0; border-radius: 6px; padding: .28rem .5rem; background: transparent; color: var(--tm-muted); font-size: .62rem; font-weight: 700; cursor: pointer; min-height: 1.8rem; }
.ni-chart-controls button[aria-pressed='true'] { background: var(--tm-bg); color: var(--tm-text); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
.ni-chart-controls button:hover { color: var(--tm-accent); }
.ni-data-insights [hidden] { display: none !important; }
.ni-data-insights :is(button, a, [tabindex='0']):focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 3px; border-radius: 5px; }
.ni-chart-visual { padding: .85rem 1rem .65rem; min-width: 0; }
.ni-chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; margin: 0 0 .8rem; font-size: .64rem; color: var(--tm-muted); }
.ni-chart-legend span { display: inline-flex; gap: .35rem; align-items: center; }
.ni-chart-swatch { display: inline-block; width: .5rem; height: .5rem; border-radius: 2px; flex-shrink: 0; background: var(--ni-chart-primary); }
.ni-chart-swatch.is-secondary { background: var(--ni-chart-secondary); }
.ni-chart-axis { display: flex; justify-content: space-between; margin: 0 0 .5rem; color: var(--tm-faint); font-size: .59rem; line-height: 1.5; }
.ni-chart-bars { display: grid; gap: .65rem; }
.ni-chart-bar-row { display: grid; grid-template-columns: minmax(5rem, 1.05fr) minmax(4rem, 1.6fr) minmax(3.5rem, .65fr); gap: .7rem; align-items: center; border-radius: 5px; }
.ni-chart-bar-label { font-size: .75rem; color: var(--tm-text-2); line-height: 1.4; overflow-wrap: anywhere; }
.ni-chart-bar-label a { color: inherit; text-decoration: none; }
.ni-chart-bar-label a:hover { color: var(--tm-accent); text-decoration: underline; }
.ni-chart-bar-tracks { display: grid; gap: 3px; }
.ni-chart-bar-track { position: relative; min-width: 0; height: 15px; background: var(--tm-bg-sunk); border-radius: 3px; }
.ni-chart-bar-track::before { content: ''; position: absolute; left: var(--ni-zero, 0%); top: -2px; bottom: -2px; width: 1px; background: var(--tm-faint); opacity: .6; z-index: 1; }
.ni-chart-bar-fill { position: absolute; inset-block: 0; border-radius: 3px; background: var(--ni-chart-primary); min-width: 0; }
.ni-chart-bar-fill.is-secondary { background: var(--ni-chart-secondary); }
.ni-chart-bar-fill.is-negative { background: var(--ni-chart-negative); }
.ni-chart-bar-value { font-size: .75rem; font-weight: 800; text-align: right; line-height: 1.4; overflow-wrap: anywhere; }
.ni-chart-bar-value small { display: block; font-size: .6rem; font-weight: 500; color: var(--tm-muted); }
.ni-chart-detail { margin: .8rem 0 0; padding: .55rem .65rem; min-height: 2.7rem; border-radius: 8px; background: var(--tm-bg-soft); color: var(--tm-muted); font-size: .65rem; line-height: 1.55; overflow-wrap: anywhere; }
.ni-chart-detail strong { color: var(--tm-text-2); font-weight: 700; }
.ni-chart-detail a { color: var(--tm-accent); font-weight: 700; }
.ni-chart-detail-note { display: block; margin-top: .1rem; }
.ni-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ni-chart-svg text { font-family: inherit; font-size: 10px; fill: var(--tm-muted); }
.ni-chart-gridline { stroke: var(--tm-line-soft); stroke-width: 1; }
.ni-chart-zero { stroke: var(--tm-faint); stroke-width: 1; stroke-dasharray: 4 3; }
.ni-chart-line { fill: none; stroke: var(--ni-chart-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ni-chart-line.is-secondary { stroke: var(--ni-chart-secondary); stroke-dasharray: 5 3; }
.ni-chart-point { fill: var(--tm-bg); stroke: var(--ni-chart-primary); stroke-width: 2; cursor: default; }
.ni-chart-point.is-secondary { stroke: var(--ni-chart-secondary); }
.ni-chart-mark:focus { outline: none; }
.ni-chart-mark:focus .ni-chart-point, .ni-chart-mark:hover .ni-chart-point { fill: var(--ni-chart-primary); stroke-width: 3; }
.ni-chart-mark:focus .ni-chart-point.is-secondary, .ni-chart-mark:hover .ni-chart-point.is-secondary { fill: var(--ni-chart-secondary); }
.ni-chart-point:hover, .ni-chart-point:focus { fill: var(--ni-chart-primary); stroke-width: 3; outline: none; }
.ni-chart-point.is-secondary:hover, .ni-chart-point.is-secondary:focus { fill: var(--ni-chart-secondary); }
.ni-chart-point-hit { fill: transparent; pointer-events: all; }
.ni-chart-line-value { font-size: .6rem; color: var(--tm-muted); margin: 0 0 .2rem; }
.ni-chart-donut-layout { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: center; }
.ni-chart-donut { width: 100%; max-width: 12rem; margin: auto; }
.ni-chart-donut-track { fill: none; stroke: var(--tm-bg-sunk); stroke-width: 16; }
.ni-chart-donut-segment { fill: none; stroke-width: 16; transform-origin: 100px 100px; transform: rotate(-90deg); }
.ni-chart-donut-total { font-size: 22px !important; font-weight: 800; fill: var(--tm-text) !important; letter-spacing: -.03em; }
.ni-chart-donut-caption { font-size: 10px !important; fill: var(--tm-muted); }
.ni-chart-donut-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.ni-chart-donut-legend li { display: grid; grid-template-columns: .5rem minmax(0, 1fr) auto; gap: .4rem; align-items: center; padding: .3rem; border-radius: 5px; font-size: .65rem; }
.ni-chart-donut-legend li:hover, .ni-chart-donut-legend li:focus { background: var(--tm-bg-soft); }
.ni-chart-donut-legend .ni-chart-portion-label { color: var(--tm-text-2); overflow-wrap: anywhere; }
.ni-chart-donut-legend a.ni-chart-portion-label:hover { color: var(--tm-accent); text-decoration: underline; }
.ni-chart-donut-legend .ni-chart-portion-value { text-align: right; color: var(--tm-text); font-weight: 800; }
.ni-chart-donut-legend small { display: block; font-size: .58rem; font-weight: 500; color: var(--tm-muted); }
.ni-chart-table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.ni-chart-table { width: 100%; border-collapse: collapse; font-size: .68rem; }
.ni-chart-table caption { padding: .6rem 1rem; color: var(--tm-muted); font-size: .62rem; text-align: left; }
.ni-chart-table th, .ni-chart-table td { padding: .55rem .8rem; text-align: left; border-top: 1px solid var(--tm-line-soft); vertical-align: top; }
.ni-chart-table thead th { font-size: .6rem; color: var(--tm-muted); background: var(--tm-bg-soft); font-weight: 700; }
.ni-chart-table tbody th { font-weight: 600; color: var(--tm-text-2); min-width: 6rem; overflow-wrap: anywhere; }
.ni-chart-table .ni-chart-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ni-chart-row-note { min-width: 7rem; color: var(--tm-muted); line-height: 1.5; overflow-wrap: anywhere; }
.ni-chart-row-note span { display: block; }
.ni-chart-missing { color: var(--tm-faint); font-size: .62rem; }
.ni-chart-empty { padding: 2.5rem 1rem !important; text-align: center !important; color: var(--tm-muted); font-size: .7rem; line-height: 1.6; }
.ni-chart-fallback-note { margin: 0 0 .65rem; color: var(--tm-muted); font-size: .65rem; line-height: 1.5; }
@media (max-width: 900px) {
  .ni-insight-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .ni-data-insights { gap: .75rem; }
  .ni-insight-heading { align-items: start; flex-direction: column; gap: .65rem; }
  .ni-insight-scope { max-width: 100%; align-items: start; text-align: left; }
  .ni-insight-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ni-insight-fact { padding: .75rem; }
  .ni-insight-fact::before { left: .75rem; }
  .ni-insight-fact dd { font-size: 1.2rem; }
  .ni-insight-fact dd.is-wide { font-size: clamp(.8rem, 3.8vw, 1rem); }
  .ni-chart-head { padding: .8rem; gap: .55rem; flex-wrap: wrap; }
  .ni-chart-head > div:first-child { flex: 1 1 12rem; }
  .ni-chart-visual { padding: .75rem .8rem .6rem; }
  .ni-chart-bar-row { grid-template-columns: minmax(4.5rem, 1fr) minmax(3rem, 1.2fr) minmax(3rem, .65fr); gap: .5rem; }
  .ni-chart-bar-label, .ni-chart-bar-value { font-size: .7rem; }
  .ni-chart-donut-layout { grid-template-columns: 1fr; gap: .7rem; }
  .ni-chart-donut { max-width: 10rem; }
  .ni-chart-donut-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .65rem; }
  .ni-chart-donut-legend li { align-items: start; grid-template-columns: .5rem minmax(0, 1fr); }
  .ni-chart-donut-legend .ni-chart-swatch { margin-top: .2rem; }
  .ni-chart-donut-legend .ni-chart-portion-value { grid-column: 2; text-align: left; }
  .ni-chart-donut-legend small { display: inline; margin-left: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ni-data-insights *, .ni-data-insights *::before, .ni-data-insights *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .ni-chart-controls, .ni-chart-detail { display: none !important; }
  .ni-data-insights .ni-chart-table-wrap[hidden] { display: block !important; }
  .ni-chart-visual { display: none !important; }
  .ni-insight-charts { display: block; }
  .ni-insight-chart { margin-bottom: 1rem; break-inside: avoid; }
}