/* =========================================================
   INTELFREED // INTEL TEMPERATURE
   ========================================================= */

.if-threat-meter {
    --if-level-color:var(--muted);
    width:100%;
    margin:0 0 14px;
    padding:16px;
    background:var(--panel);
    border:1px solid var(--border);
    border-left:3px solid var(--if-level-color);
    border-radius:4px;
}

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

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

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

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

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

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

.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;
}

.if-threat-gauge {
    width:100%;
    margin-top:2px;
    padding:2px 0;
}

.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;
}

.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%);
}

.if-threat-range::-moz-range-thumb {
    width:5px;
    height:25px;
    box-sizing:border-box;
    border:1px solid #070b0d;
    border-radius:1px;
    background:#fff;
    opacity:1;
}

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

.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%);
}

.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:#fff;
    opacity:1;
    appearance:none;
    -webkit-appearance:none;
}

.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;
}

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

.if-threat-scale .if-p10 {
    left:10%;
    transform:translateX(-50%);
}

.if-threat-scale .if-p25 {
    left:25%;
    transform:translateX(-50%);
}

.if-threat-scale .if-p40 {
    left:40%;
    transform:translateX(-50%);
}

.if-threat-scale .if-p60 {
    left:60%;
    transform:translateX(-50%);
}

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

.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;
}

.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;
}

.if-threat-context {
    color:var(--muted);
    font-size:.72rem;
    text-align:right;
}

.if-threat-nodata {
    padding:4px 0;
    color:var(--muted);
    font-size:.78rem;
}


/* =========================================================
   7-DAY INTEL TEMPERATURE
   ========================================================= */

.if-history {
    margin:0 0 18px;
    padding:16px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:4px;
}

.if-history-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.if-history-title {
    color:var(--fg);
    font-weight:800;
    letter-spacing:.08em;
}

.if-history-subtitle {
    margin-top:2px;
    color:var(--muted);
    font-size:.70rem;
    letter-spacing:.05em;
}

.if-history-period {
    color:var(--muted);
    font-size:.72rem;
    white-space:nowrap;
}

.if-history-grid {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:8px;
}

.if-day-card {
    --if-level-color:var(--muted);
    min-width:0;
    padding:12px 8px 10px;
    background:#090f12;
    border:1px solid var(--border);
    border-top:3px solid var(--if-level-color);
    border-radius:3px;
    text-align:center;
}

.if-day-card.today {
    background:var(--panel2);
    border-color:#345044;
    box-shadow:inset 0 0 0 1px rgba(124,255,138,.08);
}

.if-day-name {
    color:var(--fg);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.06em;
}

.if-day-card.today .if-day-name {
    color:var(--green);
}

.if-day-date {
    margin-top:1px;
    color:var(--muted);
    font-size:.61rem;
}

.if-day-status {
    margin-top:10px;
    min-height:1.2em;
    color:var(--if-level-color);
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.04em;
}

.if-day-score {
    margin-top:1px;
    color:var(--if-level-color);
    font-size:1.45rem;
    font-weight:800;
}

.if-day-score.no-score {
    color:var(--muted);
}

.if-day-meter {
    display:block;
    width:100%;
    height:7px;
    margin:8px 0 7px;
    border:0;
    background:#111a1e;
}

.if-day-meter::-moz-meter-bar {
    background:#111a1e;
    border:0;
}

.if-day-card.low .if-day-meter::-moz-meter-optimum,
.if-day-card.low .if-day-meter::-moz-meter-bar {
    background:var(--green);
}

.if-day-card.moderate .if-day-meter::-moz-meter-optimum,
.if-day-card.moderate .if-day-meter::-moz-meter-bar {
    background:var(--cyan);
}

.if-day-card.elevated .if-day-meter::-moz-meter-optimum,
.if-day-card.elevated .if-day-meter::-moz-meter-bar {
    background:var(--amber);
}

.if-day-card.high .if-day-meter::-moz-meter-optimum,
.if-day-card.high .if-day-meter::-moz-meter-bar {
    background:#ff8c42;
}

.if-day-card.critical .if-day-meter::-moz-meter-optimum,
.if-day-card.critical .if-day-meter::-moz-meter-bar {
    background:var(--red);
}

.if-day-meter::-webkit-meter-bar {
    height:7px;
    background:#111a1e;
    border:0;
    border-radius:1px;
}

.if-day-card.low .if-day-meter::-webkit-meter-optimum-value {
    background:var(--green);
}

.if-day-card.moderate .if-day-meter::-webkit-meter-optimum-value {
    background:var(--cyan);
}

.if-day-card.elevated .if-day-meter::-webkit-meter-optimum-value {
    background:var(--amber);
}

.if-day-card.high .if-day-meter::-webkit-meter-optimum-value {
    background:#ff8c42;
}

.if-day-card.critical .if-day-meter::-webkit-meter-optimum-value {
    background:var(--red);
}

.if-day-meter-empty {
    width:100%;
    height:7px;
    margin:8px 0 7px;
    background:#111a1e;
}

.if-day-count {
    color:var(--muted);
    font-size:.55rem;
    white-space:nowrap;
}

.if-history-footer {
    margin-top:11px;
    color:var(--muted);
    font-size:.66rem;
    text-align:right;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px) {
    .if-history-grid {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:800px) {
    .if-threat-meter,
    .if-history {
        padding:13px;
    }

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

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

    .if-threat-subtitle,
    .if-history-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;
    }

    .if-history-footer {
        text-align:left;
    }
}

@media(max-width:600px) {
    .if-history-grid {
        display:flex;
        overflow-x:auto;
        gap:8px;
        padding-bottom:5px;
        scroll-snap-type:x proximity;
    }

    .if-day-card {
        flex:0 0 116px;
        scroll-snap-align:start;
    }

    .if-history-period {
        display:none;
    }
}

@media(max-width:480px) {
    .if-threat-meter,
    .if-history {
        padding:11px;
    }

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

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

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