/* ============================================================================
   Headline Dashboard (CP-701 / CP-702)
   Tier-varied 5-box headline + inline drill-in sections. All selectors are
   namespaced under .headline-* so they never leak into the other dashboards,
   which keep their own scoped .kpi-card styling.
   ============================================================================ */

.headline-kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
    width: 100%;
    box-sizing: border-box;
}

.headline-box {
    background: #fff;
    border-radius: 20px;
    /* Vertical trimmed 26px -> 22px (CP-828); horizontal deliberately unchanged. */
    padding: clamp(16px, 3vw, 22px) clamp(16px, 3vw, 26px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.headline-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.headline-box:focus-visible {
    outline: 2px solid #C8A951;
    outline-offset: 2px;
}

/* Gold accent bar by default; overridden per-box by --headline-accent or a band class. */
.headline-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--headline-accent, linear-gradient(135deg, #C8A951 0%, #d4b563 100%));
}

.headline-box.very-low::before  { background: linear-gradient(135deg, #228B22 0%, #1a6b1a 100%); }
.headline-box.low::before       { background: linear-gradient(135deg, #32CD32 0%, #28a428 100%); }
.headline-box.medium::before    { background: linear-gradient(135deg, #FF8C00 0%, #e67e22 100%); }
.headline-box.high::before      { background: linear-gradient(135deg, #DC143C 0%, #c0102b 100%); }
.headline-box.very-high::before { background: linear-gradient(135deg, #8B0000 0%, #6b0000 100%); }

.headline-box .kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* ---- Content region beneath the title (CP-828) ----
   The tiles are grid items, so every card stretches to the tallest in the row (tile 1,
   whose height the gauge drives). Previously the shorter tiles' content sat flush at
   flex-start and the entire surplus pooled as dead space at the bottom. The header stays
   pinned at the top; .headline-body takes the remaining height and centres its content in
   it — Jamie's "move the text down under the headline". Tile 1 is unaffected in practice
   because its content already fills the card. */
.headline-box .headline-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

/* These carry margin-top: auto so they sat at the bottom of the card. Inside a centred
   body an auto margin absorbs the free space and defeats justify-content, re-pooling the
   gap underneath — so they join the centred group instead. Their own padding-top keeps
   the separation, and the hint stays visible and legible. */
.headline-box .headline-body > .kpi-breakdown,
.headline-box .headline-body > .headline-hint,
.headline-box .headline-body > .headline-zt-caption {
    margin-top: 0;
}

/* Tile 1 centres its children horizontally via .risk-profile-box; the body is now the
   flex parent that has to carry it. */
.risk-profile-box .headline-body {
    align-items: center;
}

.headline-box .kpi-title {
    font-size: 1rem;
    font-weight: 600;
    color: #14213D;
    line-height: 1.25;
}

.headline-box .headline-info {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-left: 6px;
    cursor: help;
    transition: color 0.2s ease;
}

.headline-box .headline-info:hover {
    color: #C8A951;
}

.headline-box .kpi-icon {
    font-size: 1.4rem;
    color: #C8A951;
    opacity: 0.85;
    flex-shrink: 0;
    margin-left: 10px;
}

.headline-box .kpi-value {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    color: #14213D;
    margin-bottom: 8px;
    line-height: 1;
}

.headline-box .kpi-subtitle {
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 12px;
}

.headline-box .kpi-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.headline-box .breakdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #495057;
}

.headline-box .breakdown-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.headline-box .breakdown-dot.overdue     { background: #e74c3c; }
.headline-box .breakdown-dot.in-progress { background: #3498db; }

.headline-hint {
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #C8A951;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.headline-box:hover .headline-hint,
.headline-box.active .headline-hint {
    opacity: 1;
}

.headline-box.active {
    box-shadow: 0 12px 34px rgba(200, 169, 81, 0.28);
}

/* ---- Box 1: risk profile + gauge ---- */
.risk-profile-box {
    align-items: center;
    text-align: center;
}

.risk-profile-box .kpi-header {
    width: 100%;
}

.risk-profile-gauge {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.risk-profile-label {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 4px;
}

/* ---- IPRA (Organisation Psychosocial Readiness) headline box ---- */
.ipra-overall {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ipra-overall-score {
    font-size: 2.4rem;
    font-weight: 800;
    color: #14213D;
    line-height: 1;
}

.ipra-overall-max {
    font-size: 1.1rem;
    font-weight: 600;
    color: #6c757d;
}

.ipra-readiness-chip {
    display: inline-block;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- Page-level suppression banner (whole hazard cohort below the privacy floor) ---- */
.hazard-suppression-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: #f8f9fa;
    border: 1px solid #e2e6ea;
    border-left: 4px solid #C8A951;
    border-radius: 12px;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.4;
}

.hazard-suppression-banner i {
    color: #C8A951;
    font-size: 1.2rem;
}

/* ---- Suppression ---- */
.headline-suppressed {
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 14px;
    line-height: 1.4;
}

/* ---- Load failure (CP-742) ---- */
/* Reuses the suppressed block styling, but an amber accent + warning icon make a failed safety
   fetch clearly distinct from a privacy suppression (grey) and, above all, from a genuine 0. */
.headline-unavailable {
    color: #8a6d00;
    font-style: normal;
    background: #fdf6e3;
    border-left: 4px solid #C8A951;
}

.headline-unavailable i {
    color: #C8A951;
    margin-right: 6px;
}

/* ============================================================================
   Zero-tolerance surfacing (CP-809)
   ============================================================================ */

/* ---- Tile 1: zero-tolerance alert panel beside the (honest, 14-hazard) dial ----
   Pink panel with a red warning triangle. Rendered only when there is a loaded
   count > 0, so it can never contradict the dial's mathematical band. */
.headline-zt-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fdecef;
    border: 1px solid #f3c6cf;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
}

.headline-zt-alert > i {
    color: #DC143C;
    font-size: 1.3rem;
    flex-shrink: 0;
    transform-origin: 50% 90%;
}

.headline-zt-alert-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.headline-zt-alert-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #c0102b;
}

.headline-zt-alert-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: #14213D;
}

/* ---- Zero-tolerance tile: conditional circular state icon ----
   Danger (instances > 0) = red triangle in a red wash; safe (a loaded 0) = green
   shield in a green wash. The unavailable/suppressed states keep the default gold
   .kpi-icon so a failed fetch never reads as a confident all-clear. */
.zero-tolerance-box .kpi-icon.zt-icon-danger,
.zero-tolerance-box .kpi-icon.zt-icon-safe {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    opacity: 1;
}

.zero-tolerance-box .kpi-icon.zt-icon-danger {
    background: rgba(220, 20, 60, 0.12);
    color: #DC143C;
}

.zero-tolerance-box .kpi-icon.zt-icon-safe {
    background: rgba(34, 139, 34, 0.12);
    color: #228B22;
}

/* ---- Zero-tolerance tile: zero-state caption ---- */
.headline-zt-caption {
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #228B22;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Attention wobble on the tile-1 alert indicator (CP-809, STAGE-only) ----
   Verbally floated in the 27 Aug meeting (~09:35), NOT one of Jamie's 10 written items;
   Alex approved building it for stage so Jamie can judge it visually. Subtle: a long still
   pause then a small slow wobble, suggesting the reading could trend high if validated.
   CSS-only, and fully suppressed under prefers-reduced-motion (vestibular safety —
   non-negotiable). The indicator only exists when instances > 0, so there is no
   zero-state animation to suppress. */
@media (prefers-reduced-motion: no-preference) {
    .headline-zt-alert > i {
        animation: zt-alert-wobble 4.5s ease-in-out infinite;
    }

    @keyframes zt-alert-wobble {
        0%, 82%, 100% { transform: rotate(0deg) translateY(0); }
        86%           { transform: rotate(-7deg) translateY(-1px); }
        90%           { transform: rotate(5deg) translateY(-1px); }
        94%           { transform: rotate(-3deg); }
        98%           { transform: rotate(1deg); }
    }
}

/* Zero-tolerance redline surge: the needle winds up through a full band toward
   red, trembles at the top, then settles back to the honest resting reading.
   Communicates "reading is Low, but reported zero-tolerance instances are
   near-critical" WITHOUT changing the score or band. Only exists when
   instances > 0; suppressed under reduced motion. (CP-824 r2) */
@media (prefers-reduced-motion: no-preference) {
    .zt-trending g[id$="_Axis_0_Pointers_0"] {
        transform-box: view-box;
        transform-origin: center;
        animation: zt-needle-surge 6s ease-in-out infinite;
    }
    /* positive rotation = clockwise = toward the red end of the gauge */
    @keyframes zt-needle-surge {
        0%, 45%  { transform: rotate(0deg); }
        58%      { transform: rotate(52deg); }   /* wind up through a full band+ */
        66%      { transform: rotate(48deg); }   /* hold near the threat */
        72%      { transform: rotate(50deg); }   /* tremble at the top */
        85%      { transform: rotate(-2deg); }   /* sink back, slight undershoot */
        92%      { transform: rotate(0.8deg); }
        100%     { transform: rotate(0deg); }
    }
}

/* ============================================================================
   Inline drill-in detail sections
   ============================================================================ */

.headline-detail {
    background: #fff;
    border-radius: 20px;
    padding: clamp(18px, 3vw, 28px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    border-top: 4px solid #C8A951;
    animation: headline-detail-in 0.25s ease;
}

@keyframes headline-detail-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.headline-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

/* Heading + subtitle group. Keeps the header a two-child flex row, so space-between still
   pins the close button to the right edge; the subtitle wraps beneath the h3 rather than
   pushing the button out of the row. CP-826. */
.headline-detail-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
}

.headline-detail-subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    color: #495057;
    line-height: 1.35;
}

.headline-detail-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #14213D;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.headline-detail-header h3 i {
    color: #C8A951;
}

.headline-detail-close {
    background: transparent;
    border: none;
    flex-shrink: 0;
    align-self: flex-start;
    color: #6c757d;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.headline-detail-close:hover {
    background: #f1f3f5;
    color: #14213D;
}

.headline-interpretive {
    margin-top: 18px;
    padding: 16px 18px;
    background: #f8f9fa;
    border-left: 4px solid #C8A951;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #343a40;
}

/* ---- Zero-tolerance detail ---- */
.zt-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.zt-summary-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #f8f9fa;
    min-width: 160px;
}

.zt-summary-item.has-instances {
    background: rgba(220, 20, 60, 0.08);
}

.zt-summary-count {
    font-size: 1.8rem;
    font-weight: 700;
    color: #14213D;
}

.zt-summary-item.has-instances .zt-summary-count {
    color: #c0102b;
}

.zt-summary-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
}

.zt-trigger-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zt-trigger-row {
    padding: 14px 16px;
    border: 1px solid #eef0f2;
    border-left: 4px solid #DC143C;
    border-radius: 10px;
    background: #fff;
}

.zt-trigger-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.zt-trigger-hazard {
    font-weight: 700;
    color: #14213D;
}

.zt-trigger-team {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    background: #f1f3f5;
    padding: 2px 10px;
    border-radius: 999px;
}

.zt-trigger-text {
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.5;
}

.zt-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #228B22;
    font-size: 0.95rem;
}

/* ---- IPRA readiness detail (redesigned pooled-cohort view, CP-812) ---- */
.ipra-headline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 22px;
}

.ipra-overall-block {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ipra-detail .ipra-overall-score {
    font-size: 2.75rem;
    font-weight: 800;
    color: #14213D;
    line-height: 1;
}

.ipra-cohort-note {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Team-manager degradation line — shown in place of the comparison when gap data is unavailable. */
.ipra-degraded-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px solid #e2e6ea;
    border-left: 4px solid #C8A951;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.45;
}

.ipra-degraded-note i {
    color: #C8A951;
}

/* Employee-vs-Leader and Domains comparison sections. */
.ipra-compare-section {
    margin-top: 22px;
}

.ipra-section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #14213D;
    margin: 0 0 6px;
}

/* Four domain mini-strips side by side (2-up on narrow screens). */
.ipra-domain-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 18px;
}

@media (max-width: 720px) {
    .ipra-domain-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

.ipra-domain-strip-col {
    display: flex;
    flex-direction: column;
}

.ipra-domain-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #14213D;
    min-height: 34px;
}

/* Insight box — amber left border, cream fill, small-caps label. Content is API-supplied. */
.ipra-insight {
    margin-top: 18px;
    padding: 14px 16px;
    background: #fffdf6;
    border: 1px solid #efe7cf;
    border-left: 4px solid #FF8C00;
    border-radius: 10px;
}

.ipra-insight-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #b06a00;
    margin-bottom: 6px;
}

.ipra-insight-body {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #343a40;
}

/* Legend footer — marker glyphs + band swatches. */
.ipra-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 20px;
    background: #fbfcfd;
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    padding: 12px 14px;
}

.ipra-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: #495057;
}

/* Small separation between the marker legend and the band-colour legend. */
.ipra-legend-gap {
    margin-left: 8px;
}

.ipra-sw {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

/* Marker glyphs in the legend — mirror the strip's employee (down) / leader (up) triangles. */
.ipra-marker-glyph {
    width: 0;
    height: 0;
    display: inline-block;
    flex-shrink: 0;
}

.ipra-marker-down {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid #14213D;
}

.ipra-marker-up {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid #C8A951;
}

/* ---- Demand/RDS detail ---- */
.demand-rds-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(220, 20, 60, 0.1);
    color: #c0102b;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.demand-rds-composites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.composite-tile {
    text-align: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
}

.composite-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 8px;
}

.composite-value {
    font-size: 2rem;
    font-weight: 800;
    color: #14213D;
    line-height: 1;
}

.composite-band {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-top: 6px;
}

.demand-rds-ranked {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.ranked-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #14213D;
    margin-bottom: 10px;
}

.ranked-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f5;
}

.ranked-name {
    font-size: 0.9rem;
    color: #343a40;
}

.ranked-score {
    font-size: 0.9rem;
    font-weight: 700;
    color: #14213D;
}

.ranked-band {
    font-size: 0.78rem;
    color: #6c757d;
    min-width: 62px;
    text-align: right;
}

/* Band-coloured risk labels in the Demand & Resource breakdown (WP8 / CP-713). Only the label
   text takes its band colour — scores, layout and the underlying band assignment are unchanged.
   Palette matches the Scoring Spec v2.0 hazard bands used on the headline accent bars. */
.demand-rds-detail .band-very-low  { color: #228B22; font-weight: 700; }
.demand-rds-detail .band-low       { color: #32CD32; font-weight: 700; }
.demand-rds-detail .band-medium    { color: #FF8C00; font-weight: 700; }
.demand-rds-detail .band-high      { color: #DC143C; font-weight: 700; }
.demand-rds-detail .band-very-high { color: #8B0000; font-weight: 700; }

/* ---- Shared back-to-top affordance (WP8 / CP-713, wireframe d) ---- */
.headline-back-to-top {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.headline-back-to-top .back-to-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C8A951;
    color: #14213D;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
}

.headline-back-to-top .back-to-top-btn:hover {
    background: #d4b563;
    transform: translateY(-1px);
}

.headline-back-to-top .back-to-top-btn:focus-visible {
    outline: 2px solid #14213D;
    outline-offset: 2px;
}