/* MITRE-specific rail chrome — phase cascade + hourly sparkline +
 * phase-card drill affordance + selection highlights driven by
 * data/compliance/mitre/static/rail.js.
 *
 * Phase 15 §9 — these rules used to live in
 * flask_app/static/css/compliance.css; they were extracted here so
 * the MITRE framework folder owns its own static surface end-to-end
 * and other frameworks (AWIA / NIS2 / NIST CSF / IEC 62443 / CISA)
 * don't ship MITRE's kill-chain primitives.
 *
 * Loaded by flask_app/templates/base.html via the
 * /compliance/_static/<fw_id>/<filename> route.
 *
 * Tokens (--cp-*, --color-brand-green) come from the global
 * compliance.css — kept the same so the visual look is unchanged.
 */

/* ── Mini phase cascade — 5-cell horizontal strip in the org rail ── */
.fw-mini-cascade {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}
.fw-mini-phase {
    background: var(--cp-gray-50);
    border: 1px solid var(--cp-gray-100);
    border-radius: 0.375rem;
    padding: 0.5rem 0.25rem;
    text-align: center;
}
.fw-mini-phase-active {
    background: var(--cp-red-soft-bg);
    border-color: var(--cp-red-border);
}
.fw-mini-phase-clear {
    background: var(--cp-green-soft-bg);
    border-color: var(--cp-green-border);
}
.fw-mini-phase-name {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--cp-gray-500);
}
.fw-mini-phase-count {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cp-gray-900);
    margin-top: 2px;
}

/* Phase chips with non-zero counts deep-link to the alerts page —
   render the chip as a clickable card without losing the .fw-mini-phase
   look. On hover/focus we strengthen the border and surface a small
   "↗" arrow in the top-right corner so the affordance reads as
   "this opens out of the page" rather than just a clickable region. */
.fw-mini-phase-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        border-color 100ms ease,
        box-shadow 100ms ease,
        transform 100ms ease;
}
.fw-mini-phase-link::after {
    content: "↗";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.625rem;
    line-height: 1;
    color: var(--cp-gray-500);
    opacity: 0;
    transition: opacity 100ms ease;
    pointer-events: none;
}
.fw-mini-phase-link:hover,
.fw-mini-phase-link:focus-visible {
    transform: translateY(-1px);
    border-color: var(--cp-gray-500);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}
.fw-mini-phase-link:hover::after,
.fw-mini-phase-link:focus-visible::after {
    opacity: 1;
}
.fw-mini-phase-link:focus-visible {
    outline: 2px solid var(--cp-blue-500, #3b82f6);
    outline-offset: 1px;
}

/* ── Sparkline — 6 hourly bars inside the tenant rail ── */
.fw-rail-spark {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    height: 2.5rem;
    padding: 0.125rem 0;
}
.fw-rail-spark-bar {
    flex: 1;
    min-height: 2px;
    background: linear-gradient(180deg, #d97706 0%, #fcd34d 100%);
    border-radius: 0.125rem 0.125rem 0 0;
}

/* ── Phase-card click-to-drill affordance (tenant scope only — the card
   gets role="button" so the cursor hints it's interactive). ── */
.fw-phase[role="button"] {
    cursor: pointer;
    transition:
        transform 0.12s,
        box-shadow 0.12s;
}
.fw-phase[role="button"]:hover .fw-phase-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.fw-phase[role="button"]:focus-visible {
    outline: 2px solid var(--color-brand-green, #25af88);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* ── Selected slice highlights — driven by rail.js (sibling file). ── */
.fw-tenant-chip-selected {
    outline: 2px solid var(--color-brand-green, #25af88);
    outline-offset: 1px;
}
.fw-phase-selected .fw-phase-card {
    outline: 2px solid var(--color-brand-green, #25af88);
    outline-offset: -2px;
}