/*
 * ============================================================
 * INTELFREED
 * DAILY CYBER THREAT LEVEL
 * ============================================================
 *
 * Dedicated stylesheet.
 *
 * No inline CSS is required by index2.php.
 * Compatible with IntelFreed CSP:
 *
 *     style-src 'self'
 *
 * ============================================================
 */


/* ============================================================
   METER CONTAINER
   ============================================================ */

.if-threat-meter {
    --if-level-color: var(--muted);

    width: 100%;

    margin: 0 0 18px 0;

    padding: 16px;

    box-sizing: border-box;

    background: var(--panel);

    border: 1px solid var(--border);

    border-left:
        3px solid
        var(--if-level-color);

    border-radius: 4px;
}


/* ============================================================
   CURRENT THREAT LEVEL
   ============================================================ */

.if-threat-meter.low {
    --if-level-color:
        var(--green);
}

.if-threat-meter.moderate {
    --if-level-color:
        var(--cyan);
}

.if-threat-meter.elevated {
    --if-level-color:
        var(--amber);
}

.if-threat-meter.high {
    --if-level-color:
        #ff8c42;
}

.if-threat-meter.critical {
    --if-level-color:
        var(--red);
}

.if-threat-meter.no-data {
    --if-level-color:
        var(--muted);
}


/* ============================================================
   HEADER
   ============================================================ */

.if-threat-header {
    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 16px;

    margin-bottom: 12px;
}


.if-threat-title {
    color: var(--fg);

    font-weight: 800;

    letter-spacing: .08em;
}


.if-threat-subtitle {
    margin-top: 2px;

    color: var(--muted);

    font-size: .70rem;

    letter-spacing: .05em;
}


.if-threat-status {
    color:
        var(--if-level-color);

    font-weight: 800;

    letter-spacing: .08em;

    white-space: nowrap;
}


/* ============================================================
   GAUGE
   ============================================================ */

.if-threat-gauge {
    width: 100%;

    margin-top: 2px;

    padding: 2px 0;
}


/*
 * The input itself is only being used for its native
 * value-positioning behavior.
 *
 * It is disabled because this is an indicator,
 * not an interactive control.
 */

.if-threat-range {
    display: block;

    width: 100%;

    height: 26px;

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    background: transparent;

    opacity: 1;

    cursor: default;

    pointer-events: none;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;
}


.if-threat-range:disabled {
    opacity: 1;
}


/* ============================================================
   FIREFOX TRACK
   ============================================================ */

.if-threat-range::-moz-range-track {
    width: 100%;

    height: 12px;

    box-sizing: border-box;

    border: 1px solid
        #345044;

    border-radius: 2px;

    background:
        linear-gradient(
            to right,

            #7cff8a 0%,
            #7cff8a 10%,

            #59d7ff 10%,
            #59d7ff 25%,

            #ffd166 25%,
            #ffd166 40%,

            #ff8c42 40%,
            #ff8c42 60%,

            #ff6b6b 60%,
            #ff6b6b 100%
        );
}


/* ============================================================
   FIREFOX MARKER
   ============================================================ */

.if-threat-range::-moz-range-thumb {
    width: 5px;

    height: 25px;

    box-sizing: border-box;

    border:
        1px solid #070b0d;

    border-radius: 1px;

    background: #ffffff;

    opacity: 1;
}


/*
 * Firefox adds a progress region to range controls.
 *
 * Make it transparent so our complete five-color track
 * remains visible.
 */

.if-threat-range::-moz-range-progress {
    height: 12px;

    background: transparent;
}


/* ============================================================
   CHROMIUM / CHROME / EDGE / SAFARI TRACK
   ============================================================ */

.if-threat-range::-webkit-slider-runnable-track {
    width: 100%;

    height: 12px;

    box-sizing: border-box;

    border:
        1px solid #345044;

    border-radius: 2px;

    background:
        linear-gradient(
            to right,

            #7cff8a 0%,
            #7cff8a 10%,

            #59d7ff 10%,
            #59d7ff 25%,

            #ffd166 25%,
            #ffd166 40%,

            #ff8c42 40%,
            #ff8c42 60%,

            #ff6b6b 60%,
            #ff6b6b 100%
        );
}


/* ============================================================
   CHROMIUM / CHROME / EDGE / SAFARI MARKER
   ============================================================ */

.if-threat-range::-webkit-slider-thumb {
    width: 5px;

    height: 25px;

    margin-top: -7px;

    box-sizing: border-box;

    border:
        1px solid #070b0d;

    border-radius: 1px;

    background: #ffffff;

    opacity: 1;

    appearance: none;

    -webkit-appearance: none;
}


/* ============================================================
   P-SCORE SCALE
   ============================================================ */

.if-threat-scale {
    position: relative;

    width: 100%;

    height: 21px;

    margin-top: 0;

    color: var(--muted);

    font-size: .65rem;

    line-height: 1;
}


.if-threat-scale span {
    position: absolute;

    top: 3px;

    white-space: nowrap;
}


/*
 * P0
 */

.if-threat-scale .if-p0 {
    left: 0;

    transform: none;
}


/*
 * P10
 */

.if-threat-scale .if-p10 {
    left: 10%;

    transform:
        translateX(-50%);
}


/*
 * P25
 */

.if-threat-scale .if-p25 {
    left: 25%;

    transform:
        translateX(-50%);
}


/*
 * P40
 */

.if-threat-scale .if-p40 {
    left: 40%;

    transform:
        translateX(-50%);
}


/*
 * P60
 */

.if-threat-scale .if-p60 {
    left: 60%;

    transform:
        translateX(-50%);
}


/*
 * P100
 */

.if-threat-scale .if-p100 {
    right: 0;

    left: auto;

    transform: none;
}


/* ============================================================
   BAND LABELS
   ============================================================ */

.if-threat-band-labels {
    display: grid;

    grid-template-columns:
        10fr
        15fr
        15fr
        20fr
        40fr;

    width: 100%;

    margin-top: 2px;

    font-size: .58rem;

    letter-spacing: .03em;

    text-align: center;
}


.if-threat-band-labels span {
    display: block;

    overflow: hidden;

    white-space: nowrap;
}


.if-band-low {
    color: #7cff8a;
}


.if-band-moderate {
    color: #59d7ff;
}


.if-band-elevated {
    color: #ffd166;
}


.if-band-high {
    color: #ff8c42;
}


.if-band-critical {
    color: #ff6b6b;
}


/* ============================================================
   SCORE + EXPLANATION
   ============================================================ */

.if-threat-details {
    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 24px;

    margin-top: 12px;
}


.if-threat-score {
    flex: 0 0 auto;

    color:
        var(--if-level-color);

    font-size: 1.4rem;

    font-weight: 800;

    letter-spacing: .02em;

    white-space: nowrap;
}


.if-threat-score small {
    color: var(--muted);

    font-size: .70rem;

    font-weight: 400;

    letter-spacing: 0;
}


.if-threat-context {
    color: var(--muted);

    font-size: .72rem;

    text-align: right;
}


/* ============================================================
   NO DATA
   ============================================================ */

.if-threat-nodata {
    padding: 4px 0;

    color: var(--muted);

    font-size: .78rem;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {

    .if-threat-meter {
        padding: 13px;
    }


    .if-threat-header {
        gap: 10px;
    }


    .if-threat-title {
        font-size: .88rem;
    }


    .if-threat-subtitle {
        font-size: .62rem;
    }


    .if-threat-status {
        font-size: .75rem;
    }


    .if-threat-range {
        height: 24px;
    }


    .if-threat-range::-moz-range-thumb {
        height: 23px;
    }


    .if-threat-range::-webkit-slider-thumb {
        height: 23px;

        margin-top: -6px;
    }


    .if-threat-scale {
        font-size: .55rem;
    }


    .if-threat-band-labels {
        font-size: .50rem;
    }


    .if-threat-details {
        display: block;

        margin-top: 10px;
    }


    .if-threat-context {
        margin-top: 4px;

        text-align: left;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .if-threat-meter {
        padding: 11px;
    }


    .if-threat-band-labels {
        font-size: .44rem;
    }


    .if-threat-scale {
        font-size: .50rem;
    }


    .if-threat-score {
        font-size: 1.2rem;
    }
}