/* ============================================================
   forre_pulse — Fortnite Server Status (pulse-port, 2026-07-08)
   Laddas endast pa ?page=fortnite-status (villkorad lank i layouten).
   Platt, harfina kanter, tabulara siffror. Toner: up=live, warn=gold, down=danger.
   OBS: skriv aldrig asterisk-snedstreck i kommentarstext (lesson 2026-07-08).
   ============================================================ */

.pulse-fnstat{display:flex;flex-direction:column;gap:14px;min-width:0}
.pulse-fnstat{--fns-tone:var(--dim)}
.pulse-fnstat[data-tone=up]{--fns-tone:var(--live)}
.pulse-fnstat[data-tone=warn]{--fns-tone:var(--gold)}
.pulse-fnstat[data-tone=down]{--fns-tone:var(--danger)}

/* ---- Hero ---- */
.fns-hero{padding:16px;border-left:3px solid var(--fns-tone);display:flex;flex-direction:column;gap:13px}
.fns-hero-main{display:flex;align-items:center;gap:14px}
.fns-hero-icon{position:relative;flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;font-size:26px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--fns-tone)}
.fns-hero-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:currentColor}
.pulse-fnstat[data-tone=up] .fns-hero-dot{animation:fnsPulse 1.8s ease-in-out infinite}
@keyframes fnsPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
.fns-hero-copy{flex:1;min-width:0}
.fns-kicker{display:inline-flex;align-items:center;gap:7px}
.fns-kicker .bi{color:var(--accent)}
.fns-title{margin:4px 0 2px;font-family:'Roboto';font-weight:900;font-size:24px;line-height:1.1;color:var(--ink)}
.fns-sub{margin:0;font-size:13px;color:var(--ink2)}
.fns-refresh{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-weight:800}

/* ---- Health ---- */
.fns-health{display:flex;flex-direction:column;gap:6px}
.fns-health-top{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:var(--ink2)}
.fns-health-top strong{font-size:14px;color:var(--ink)}
.fns-health-bar i{background:var(--fns-tone)}

/* ---- Chips ---- */
.fns-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fns-chip{display:flex;flex-direction:column;gap:3px;padding:9px 11px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm)}
.fns-chip span{font-family:'Roboto';font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.fns-chip strong{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fns-chip strong.is-good{color:var(--live)}
.fns-chip strong.is-bad{color:var(--danger)}

.fns-error{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12.5px;border:1px solid color-mix(in srgb,var(--danger) 40%,var(--line));background:color-mix(in srgb,var(--danger) 8%,var(--card));color:var(--danger);border-radius:var(--r-sm)}

/* ---- Kort ---- */
.fns-card{padding:14px 16px}
.fns-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.fns-card-head .slabel{display:inline-flex;align-items:center;gap:7px}
.fns-card-head .bi{color:var(--accent)}
.fns-count{font-size:11px;font-weight:800;color:var(--dim)}

/* ---- Systemgrid ---- */
.fns-comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fns-comp{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--inset);border:1px solid var(--line);border-left:3px solid var(--dim);border-radius:var(--r-sm)}
.fns-comp.is-op{border-left-color:var(--live)}
.fns-comp.is-warn{border-left-color:var(--gold)}
.fns-comp.is-down,.fns-comp.is-unknown{border-left-color:var(--danger)}
.fns-comp-ico{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--dim);font-size:13px}
.fns-comp.is-op .fns-comp-ico{color:var(--live)}
.fns-comp.is-warn .fns-comp-ico{color:var(--gold)}
.fns-comp.is-down .fns-comp-ico,.fns-comp.is-unknown .fns-comp-ico{color:var(--danger)}
.fns-comp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fns-comp-name{font-family:'Roboto';font-weight:800;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fns-comp-sub{font-size:10.5px;color:var(--dim)}
.fns-pill{flex:0 0 auto;font-family:'Roboto';font-weight:800;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink2)}
.fns-comp.is-op .fns-pill,.fns-row.is-op .fns-pill{color:var(--live);border-color:color-mix(in srgb,var(--live) 40%,var(--line))}
.fns-comp.is-warn .fns-pill,.fns-row.is-warn .fns-pill{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.fns-comp.is-down .fns-pill,.fns-comp.is-unknown .fns-pill{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}

/* ---- Incident- och underhallslistor ---- */
.fns-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fns-list{display:flex;flex-direction:column;gap:8px}
.fns-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--inset);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm)}
.fns-row.is-op{border-left-color:var(--live)}
.fns-row-title{font-family:'Roboto';font-weight:800;font-size:13px;color:var(--ink)}
.fns-row-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fns-time{font-size:11px;color:var(--dim)}

/* ---- Tomlagen + fot ---- */
.fns-empty{display:flex;align-items:center;gap:9px;padding:14px 4px;font-size:12.5px;color:var(--ink2)}
.fns-empty .bi{font-size:16px;color:var(--dim)}
.fns-empty.is-good .bi{color:var(--live)}
.fns-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 6px;font-size:11px;color:var(--dim)}
.fns-foot .bi{color:var(--accent);margin-right:4px}

@media (max-width:900px){
  .fns-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fns-two{grid-template-columns:1fr}
}
@media (max-width:560px){
  .fns-hero-main{flex-wrap:wrap}
  .fns-refresh{order:3}
  .fns-chips{grid-template-columns:1fr}
  .fns-foot{flex-direction:column;align-items:flex-start;gap:4px}
}