/* pulse.css — OPSV4-SPINE-004 · lane P · the MD business pulse.
 *
 * Tokens only. tools/palette-guard/check-palette.mjs freezes this file's raw
 * colour set at EMPTY (it is a new file) — every colour below MUST be a
 * var(--v3-*) reference. #DC2626 and #D1D5DB do not exist in v3 and have
 * bounced a lane before; this file never writes a literal hex.
 *
 * Container queries, not viewport ones (RULES §"Sizing"): the popout gives a
 * different width to the page card on the SAME 1440px screen, so breakpoints
 * key off this element's own box, not the window.
 */

.ov4-pulse {
    container-type: inline-size;
    container-name: ov4pulse;
    font-family: var(--v3-t-display);
    color: var(--v3-anthracite);
    max-width: 100%;
    box-sizing: border-box;
}
.ov4-pulse * { box-sizing: border-box; }

/* ── loading / locked ───────────────────────────────────────────────────── */
.ov4-pulse-loading {
    padding: 24px;
    color: var(--v3-steel);
    font-size: var(--v3-s-sm);
}
.ov4-pulse-locked {
    border: 1px solid var(--v3-mist);
    border-top: 3px solid var(--v3-amber);
    border-radius: 10px;
    padding: 32px;
    text-align: center;
    background: var(--v3-snow);
}
.ov4-pulse-locked-icon { font-size: 32px; margin-bottom: 8px; }
.ov4-pulse-locked-title { font-size: var(--v3-s-lg); font-weight: 800; color: var(--v3-anthracite); }
.ov4-pulse-locked-reason { font-size: var(--v3-s-sm); color: var(--v3-steel); margin-top: 4px; }

/* ── header ─────────────────────────────────────────────────────────────── */
.ov4-pulse-header {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: var(--v3-gap-4);
}
.ov4-pulse-header-text { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 220px; }
.ov4-pulse-eyebrow {
    font-size: var(--v3-s-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--v3-slate);
}
.ov4-pulse-title { font-size: var(--v3-s-xl); font-weight: 800; margin: 0; }
.ov4-pulse-sub { font-size: var(--v3-s-sm); color: var(--v3-slate); }
.ov4-pulse-caption {
    font-size: var(--v3-s-xs); font-weight: 700; padding: 4px 10px; border-radius: 999px;
    background: var(--v3-amber-bed); color: var(--v3-amber-ink); white-space: nowrap;
}

.ov4-pulse-seggroup {
    display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--v3-mist);
}
.ov4-pulse-seg {
    min-height: 40px; padding: 0 14px; border: none; border-radius: 9px; font-size: var(--v3-s-sm);
    font-weight: 800; background: transparent; color: var(--v3-slate); cursor: pointer;
}
.ov4-pulse-seg[aria-pressed="true"] {
    background: var(--v3-snow); color: var(--v3-anthracite); border: 1px solid var(--v3-mist);
}
.ov4-pulse-seg:focus-visible { outline: 3px solid var(--v3-green); outline-offset: 2px; }

/* ── honest empty-data text — never a bar, never a dash standing for 0 ────── */
.ov4-pulse-enough-data {
    font-size: var(--v3-s-sm);
    color: var(--v3-steel);
    font-style: italic;
}

/* ── the strip: Sales -> Operations -> Finance, always this order ─────────── */
.ov4-pulse-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v3-gap-3);
    margin-bottom: var(--v3-gap-4);
}
@container ov4pulse (max-width: 760px) {
    .ov4-pulse-strip { grid-template-columns: 1fr; }
}
.ov4-pulse-strip-card {
    background: var(--v3-snow);
    border: 1px solid var(--v3-mist);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 44px;
}
.ov4-pulse-strip-fn {
    font-size: var(--v3-s-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--v3-slate);
}
.ov4-pulse-strip-headline { font-size: var(--v3-s-md); font-weight: 700; line-height: 1.4; }
.ov4-pulse-strip-value { font-size: var(--v3-s-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.ov4-pulse-strip-sub { font-size: var(--v3-s-xs); color: var(--v3-slate); }
.ov4-pulse-strip-card.is-ok   .ov4-pulse-strip-value { color: var(--v3-ov4-ok); }
.ov4-pulse-strip-card.is-warn .ov4-pulse-strip-value { color: var(--v3-ov4-warn); }
.ov4-pulse-strip-card.is-bad  .ov4-pulse-strip-value { color: var(--v3-ov4-bad); }

/* ── the 17-step panel ──────────────────────────────────────────────────── */
.ov4-pulse-section {
    background: var(--v3-snow);
    border: 1px solid var(--v3-mist);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--v3-gap-4);
}
.ov4-pulse-section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ov4-pulse-section-title { font-size: var(--v3-s-lg); font-weight: 800; flex-grow: 1; margin: 0; }

/* ONE shared scroll box for stage labels + bars + tiles, so all three scroll
   together — three independent overflow boxes would let them drift out of
   column alignment. */
.ov4-pulse-steps-scroll { overflow-x: auto; max-width: 100%; }
.ov4-pulse-steps-colgroup { min-width: 760px; display: flex; flex-direction: column; gap: 6px; }
.ov4-pulse-stages {
    display: grid;
    grid-template-columns: repeat(17, minmax(64px, 1fr));
    gap: 6px;
}
.ov4-pulse-stage-label {
    font-size: var(--v3-s-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--v3-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov4-pulse-stage-rule { display: block; height: 3px; border-radius: 2px; background: var(--v3-mist); margin-top: 4px; }

.ov4-pulse-cols {
    display: grid;
    grid-template-columns: repeat(17, minmax(64px, 1fr));
    gap: 6px;
    align-items: end;
    height: 170px;
    border-bottom: 1px solid var(--v3-mist);
}
.ov4-pulse-col {
    position: relative;
    height: 100%;
    min-width: 44px;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 4px;
    cursor: pointer;
}
.ov4-pulse-col:focus-visible { outline: 3px solid var(--v3-green); outline-offset: 2px; }
.ov4-pulse-col-val {
    font-size: var(--v3-s-xs); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
    color: var(--v3-slate);
}
.ov4-pulse-bar { display: block; border-radius: 4px 4px 0 0; min-height: 4px; }
.ov4-pulse-bar.is-now   { background: var(--v3-change); }
.ov4-pulse-bar.is-ok    { background: var(--v3-ov4-ok); }
.ov4-pulse-bar.is-warn  { background: var(--v3-ov4-warn); }
.ov4-pulse-bar.is-bad   { background: var(--v3-ov4-bad); }
.ov4-pulse-bar.is-idle  { background: var(--v3-ov4-idle); }
.ov4-pulse-col.is-selected .ov4-pulse-bar { outline: 2px solid var(--v3-anthracite); outline-offset: 2px; }

/* NOT a zero-height bar. A step with enough_data:false draws no bar at all —
   it draws this box instead, so an honest "no data" can never be read as a
   claim that the answer is zero. */
.ov4-pulse-bar-empty {
    display: flex; align-items: flex-end; justify-content: center; text-align: center;
    min-height: 44px; padding-bottom: 4px;
    font-size: 10px; line-height: 1.25; color: var(--v3-steel); font-style: italic;
}

.ov4-pulse-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 190px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    background: var(--v3-anthracite);
    color: var(--v3-snow);
    font-size: 12px;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.ov4-pulse-col:hover .ov4-pulse-tooltip,
.ov4-pulse-col:focus-visible .ov4-pulse-tooltip { display: flex; }

.ov4-pulse-tiles {
    display: grid;
    grid-template-columns: repeat(17, minmax(64px, 1fr));
    gap: 6px;
}
.ov4-pulse-tile {
    min-width: 0; min-height: 58px; padding: 6px; border-radius: 10px; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    border: 1px solid var(--v3-mist); background: var(--v3-snow); text-align: left;
}
.ov4-pulse-tile.is-selected { border: 2px solid var(--v3-anthracite); background: var(--v3-paper); }
.ov4-pulse-tile:focus-visible { outline: 3px solid var(--v3-green); outline-offset: 2px; }
.ov4-pulse-tile-row { display: flex; width: 100%; align-items: center; gap: 4px; }
.ov4-pulse-tile-n { font-size: 12px; font-weight: 800; flex-grow: 1; text-align: left; }
.ov4-pulse-tile-title { font-size: 11px; font-weight: 700; text-align: left; line-height: 1.2; }

/* Stuck badge — colour AND a word, never colour alone. */
.ov4-pulse-stuck-badge {
    font-size: 10px; font-weight: 800; color: var(--v3-snow); background: var(--v3-ov4-bad);
    border-radius: 999px; padding: 0 6px; white-space: nowrap;
}

.ov4-pulse-note { font-size: var(--v3-s-xs); color: var(--v3-slate); }

/* ── table view (accessibility twin of the bars) ───────────────────────── */
.ov4-pulse-tablewrap { overflow-x: auto; max-width: 100%; }
.ov4-pulse-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--v3-s-sm); }
.ov4-pulse-table caption { text-align: left; font-size: var(--v3-s-xs); color: var(--v3-slate); padding-bottom: 6px; }
.ov4-pulse-table th, .ov4-pulse-table td {
    border-bottom: 1px solid var(--v3-mist); padding: 8px 10px; text-align: left;
    font-variant-numeric: tabular-nums;
}
.ov4-pulse-table th { font-size: var(--v3-s-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--v3-slate); }
.ov4-pulse-table tr.is-selected td { background: var(--v3-paper); }
.ov4-pulse-table button.ov4-pulse-rowlink {
    background: none; border: none; padding: 0; font: inherit; color: var(--v3-green); font-weight: 700;
    cursor: pointer; min-height: 40px;
}

/* ── drill-down ─────────────────────────────────────────────────────────── */
.ov4-pulse-drill {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--v3-gap-4);
    align-items: start;
}
@container ov4pulse (max-width: 900px) {
    .ov4-pulse-drill { grid-template-columns: 1fr; }
}

.ov4-pulse-drill-head { display: flex; align-items: center; gap: 12px; }
.ov4-pulse-drill-n {
    width: 42px; height: 42px; border-radius: 12px; background: var(--v3-paper);
    font-size: var(--v3-s-lg); font-weight: 800; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ov4-pulse-drill-stage { font-size: var(--v3-s-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-slate); }
.ov4-pulse-drill-title { font-size: var(--v3-s-lg); font-weight: 800; }
.ov4-pulse-verdict {
    font-size: var(--v3-s-xs); font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.ov4-pulse-verdict.is-ok   { background: var(--v3-ov4-ok-bed); color: var(--v3-ov4-ok); }
.ov4-pulse-verdict.is-warn { background: var(--v3-ov4-warn-bed); color: var(--v3-ov4-warn); }
.ov4-pulse-verdict.is-bad  { background: var(--v3-ov4-bad-bed); color: var(--v3-ov4-bad); }
.ov4-pulse-verdict.is-idle { background: var(--v3-ov4-idle-bed); color: var(--v3-ov4-idle); }

.ov4-pulse-headline { font-size: var(--v3-s-md); font-weight: 700; line-height: 1.4; }

.ov4-pulse-metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
@container ov4pulse (max-width: 620px) {
    .ov4-pulse-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ov4-pulse-metric {
    padding: 10px 12px; border-radius: 12px; background: var(--v3-paper);
    display: flex; flex-direction: column; gap: 2px;
}
.ov4-pulse-metric-k { font-size: var(--v3-s-xs); font-weight: 700; color: var(--v3-slate); }
.ov4-pulse-metric-v { font-size: var(--v3-s-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
/* available:false ("Not measured yet") or value:null ("Not enough data yet") —
   text, not a number, so it can never be mistaken for a real figure. */
.ov4-pulse-metric-empty { font-size: var(--v3-s-sm); color: var(--v3-steel); font-style: italic; }
/* masked:true — withheld by role. Still styled like a VALUE (same size/weight
   as a real figure) so its absence is visibly a deliberate withholding, not
   an empty state, but coloured down so it never reads as a number. */
.ov4-pulse-metric-v.is-masked { color: var(--v3-steel); letter-spacing: .2em; }
.ov4-pulse-metric-sub { font-size: 11px; color: var(--v3-slate); }

.ov4-pulse-trend-head { display: flex; align-items: baseline; gap: 8px; }
.ov4-pulse-trend-label { font-size: var(--v3-s-sm); font-weight: 800; }
.ov4-pulse-trend-note { font-size: var(--v3-s-xs); color: var(--v3-slate); }
.ov4-pulse-trend-svg { width: 100%; height: 110px; }
.ov4-pulse-trend-line { fill: none; stroke: var(--v3-night); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ov4-pulse-trend-target { stroke: var(--v3-steel); stroke-width: 1; stroke-dasharray: 4 4; }
.ov4-pulse-trend-dot { fill: var(--v3-night); stroke: var(--v3-snow); stroke-width: 2; }
.ov4-pulse-trend-targettext { font-size: 11px; fill: var(--v3-slate); }

.ov4-pulse-stuck-list { display: flex; flex-direction: column; gap: 6px; }
.ov4-pulse-stuckjob {
    min-height: 44px; display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px 120px;
    gap: 8px; align-items: center; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--v3-mist); background: var(--v3-snow); text-align: left; cursor: pointer;
    font-size: var(--v3-s-sm); color: var(--v3-anthracite);
}
.ov4-pulse-stuckjob:focus-visible { outline: 3px solid var(--v3-green); outline-offset: 2px; }
.ov4-pulse-stuckjob-days { color: var(--v3-ov4-bad); font-weight: 800; }
.ov4-pulse-stuckjob-open { font-weight: 800; color: var(--v3-green); }

/* ── sidebar: behaviour watch + by-function ─────────────────────────────── */
.ov4-pulse-watch-row {
    min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 6px 12px;
    border-radius: 12px; border: 1px solid var(--v3-mist); background: var(--v3-snow);
    text-align: left; width: 100%; cursor: pointer;
}
.ov4-pulse-watch-row:focus-visible { outline: 3px solid var(--v3-green); outline-offset: 2px; }
.ov4-pulse-watch-badge {
    font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.ov4-pulse-watch-badge.is-bad  { background: var(--v3-ov4-bad-bed); color: var(--v3-ov4-bad); }
.ov4-pulse-watch-badge.is-warn { background: var(--v3-ov4-warn-bed); color: var(--v3-ov4-warn); }
.ov4-pulse-watch-body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ov4-pulse-watch-title { font-size: var(--v3-s-sm); font-weight: 700; }
.ov4-pulse-watch-sub { font-size: var(--v3-s-xs); color: var(--v3-slate); }
.ov4-pulse-watch-step { font-size: 11px; font-weight: 800; color: var(--v3-night); white-space: nowrap; }

.ov4-pulse-byfn-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
    font-size: var(--v3-s-sm); min-height: 36px;
}
.ov4-pulse-byfn-k { color: var(--v3-slate); }
.ov4-pulse-byfn-v { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ov4-pulse-byfn-note { font-size: var(--v3-s-xs); color: var(--v3-slate); }

/* ── targets editor (directors only) ───────────────────────────────────── */
.ov4-pulse-targets-table { width: 100%; border-collapse: collapse; font-size: var(--v3-s-sm); }
.ov4-pulse-targets-table th, .ov4-pulse-targets-table td { border-bottom: 1px solid var(--v3-mist); padding: 8px 10px; text-align: left; }
.ov4-pulse-target-input {
    width: 84px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--v3-mist); border-radius: 8px;
    font-size: var(--v3-s-sm); font-variant-numeric: tabular-nums;
}
.ov4-pulse-target-input:focus-visible { outline: 3px solid var(--v3-green); outline-offset: 2px; }
.ov4-pulse-default-badge {
    font-size: 10px; font-weight: 800; color: var(--v3-slate); background: var(--v3-paper);
    border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.ov4-pulse-save-btn {
    min-height: 44px; border: none; border-radius: 10px; background: var(--v3-green); color: var(--v3-snow);
    font-size: var(--v3-s-sm); font-weight: 800; padding: 0 18px; cursor: pointer; align-self: flex-start;
}
.ov4-pulse-save-btn:focus-visible { outline: 3px solid var(--v3-anthracite); outline-offset: 2px; }
.ov4-pulse-save-btn[disabled] { background: var(--v3-ov4-idle); cursor: default; }
.ov4-pulse-targets-msg { font-size: var(--v3-s-sm); font-weight: 700; }
.ov4-pulse-targets-msg.is-ok { color: var(--v3-ov4-ok); }
.ov4-pulse-targets-msg.is-bad { color: var(--v3-ov4-bad); }

.ov4-pulse-sidebar { display: flex; flex-direction: column; gap: var(--v3-gap-4); }
.ov4-pulse-unavailable {
    border: 1px dashed var(--v3-mist); border-radius: 10px; padding: 24px; text-align: center;
    color: var(--v3-slate); font-size: var(--v3-s-sm);
}