/* Triage film: five short scenes (see /js/triage-film.js) */
.tf {
    --tf-cyan: #4fd1ff;
    --tf-green: #3ddc97;
    --tf-red: #ff4d6a;
    --tf-ink: #e8eef7;
    max-width: 1040px;
    margin: 4.5rem auto 0;
}

.tf__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 6.2rem;
    margin-bottom: 1rem;
}

.tf__scene-head.is-in {
    animation: tf-head-in 0.5s ease both;
}

@keyframes tf-head-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.tf__scene-title {
    margin: 0 0 0.4rem;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.tf__scene-sub {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
}

.tf__play {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.tf__play:hover,
.tf__play:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.tf__play svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.tf__play .tf__icon-play,
.tf__play.is-paused .tf__icon-pause {
    display: none;
}

.tf__play.is-paused .tf__icon-play {
    display: block;
}

.tf__stage {
    border-radius: 1.25rem;
    overflow: hidden;
    aspect-ratio: 960 / 540;
    background:
        radial-gradient(ellipse 55% 50% at 50% 28%, rgba(95, 1, 173, 0.3), transparent 70%),
        radial-gradient(ellipse 80% 70% at 50% 40%, #0b2a4f 0%, #041a33 55%, #020f1f 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.tf__stage svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tf__nav {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.tf__nav li {
    flex: 1;
    min-width: 0;
}

.tf__nav button {
    --p: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.tf__nav button.is-current,
.tf__nav button:hover,
.tf__nav button:focus-visible {
    color: #fff;
}

.tf__bar {
    display: block;
    height: 3px;
    margin-bottom: 0.5rem;
    border-radius: 3px;
    background:
        linear-gradient(90deg, var(--tf-cyan), #9b5cff) 0 0 / calc(var(--p) * 100%) 100% no-repeat,
        rgba(255, 255, 255, 0.14);
}

/* ---------- inside the SVG ---------- */
.tf-svg text {
    font-family: Roboto, sans-serif;
}

.tf-tile {
    fill: #0d2745;
    stroke: rgba(255, 255, 255, 0.14);
}

.tf-tile-name {
    fill: var(--tf-ink);
    font-size: 20px;
    font-weight: 500;
}

.tf-line {
    fill: none;
    stroke: #ff9830;
    stroke-width: 3;
    stroke-linejoin: round;
}

.tf-num {
    fill: #fff;
    font-size: 64px;
    font-weight: 700;
    transition: fill 0.3s ease;
}

.tf-num.is-bad {
    fill: var(--tf-red);
}

.tf-delta {
    fill: var(--tf-red);
    font-size: 24px;
    font-weight: 700;
}

.tf-vf {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
}

.tf-check circle {
    fill: var(--tf-green);
}

.tf-check path {
    fill: none;
    stroke: #04291a;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tf-check--small path {
    stroke-width: 2.5;
}

.tf-sched rect {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(255, 255, 255, 0.18);
}

.tf-sched text {
    fill: var(--tf-ink);
    font-size: 17px;
    font-weight: 500;
}

.tf-gauge-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
    stroke-linecap: round;
}

.tf-gauge {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.tf-ring {
    fill: none;
    stroke: rgba(191, 160, 255, 0.45);
}

.tf-ring--1 {
    stroke-width: 1.5;
    stroke-dasharray: 3 9;
}

.tf-ring--2 {
    stroke: rgba(79, 209, 255, 0.35);
    stroke-dasharray: 18 10;
}

.tf-spec {
    fill: rgba(255, 255, 255, 0.35);
}

.tf-orb-ai {
    fill: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.tf-orb-num {
    font-size: 38px;
    font-weight: 700;
}

.tf-verdict {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.tf-moon {
    fill: #ffe7a3;
}

.tf-zzz {
    fill: #ffe7a3;
    font-weight: 700;
}

.tf-mark {
    fill: rgba(255, 77, 106, 0.12);
    stroke: var(--tf-red);
    stroke-width: 3;
}

.tf-mark-pulse {
    fill: none;
    stroke: var(--tf-red);
    stroke-width: 2;
}

.tf-link {
    fill: none;
    stroke: var(--tf-red);
    stroke-width: 3;
    stroke-dasharray: 1 1;
    stroke-linecap: round;
}

.tf-link-tag rect {
    fill: rgba(255, 77, 106, 0.2);
    stroke: rgba(255, 77, 106, 0.85);
}

.tf-link-tag text {
    fill: #ffd0d8;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tf-phone {
    fill: #1b2a3d;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 2;
}

.tf-screen {
    fill: #07182d;
}

.tf-notch {
    fill: #000;
}

.tf-lock-time {
    fill: #fff;
    font-size: 44px;
    font-weight: 300;
}

.tf-note {
    fill: rgba(255, 255, 255, 0.08);
    stroke: rgba(255, 77, 106, 0.6);
    stroke-width: 1.5;
}

.tf-app {
    fill: var(--accent1);
}

.tf-app-a {
    fill: #fff;
    font-size: 13px;
    font-weight: 700;
}

.tf-note-app {
    fill: rgba(232, 238, 247, 0.6);
    font-size: 13px;
}

.tf-note-sev {
    fill: #ff8a9b;
    font-size: 22px;
    font-weight: 700;
}

.tf-note-msg {
    fill: #fff;
    font-size: 17px;
    font-weight: 500;
}

.tf-note-chip {
    fill: rgba(155, 92, 255, 0.2);
    stroke: rgba(155, 92, 255, 0.75);
}

.tf-note-chip-t {
    fill: var(--tf-ink);
    font-size: 14px;
    font-weight: 500;
}

.tf-rule-wire {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 2;
    stroke-dasharray: 3 5;
}

.tf-rule-box {
    fill: #0d2745;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.5;
    transition: stroke 0.3s ease, fill 0.3s ease;
}

.tf-rule-dot {
    fill: rgba(255, 255, 255, 0.18);
    transition: fill 0.3s ease;
}

.tf-rule-ok,
.tf-rule-bad {
    fill: none;
    stroke: #04291a;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.tf-rule-bad {
    stroke: #fff;
}

.tf-rule-text {
    fill: var(--tf-ink);
    font-size: 15px;
    font-weight: 500;
}

.tf-rule.is-pass .tf-rule-box {
    stroke: rgba(61, 220, 151, 0.7);
}

.tf-rule.is-pass .tf-rule-dot {
    fill: var(--tf-green);
}

.tf-rule.is-pass .tf-rule-ok,
.tf-rule.is-fail .tf-rule-bad {
    opacity: 1;
}

.tf-rule.is-fail .tf-rule-box {
    fill: rgba(255, 77, 106, 0.16);
    stroke: var(--tf-red);
}

.tf-rule.is-fail .tf-rule-dot {
    fill: var(--tf-red);
}

.tf-rule.is-fail .tf-rule-wire {
    stroke: rgba(255, 77, 106, 0.7);
}

@media (max-width: 767.98px) {
    .tf {
        margin-top: 3rem;
    }
    .tf__head {
        min-height: 7.5rem;
    }
    .tf__scene-title {
        font-size: 1.45rem;
    }
    .tf__scene-sub {
        font-size: 0.95rem;
    }
    .tf__nav button {
        font-size: 0.75rem;
    }
}