/* Overview band (shared/js/overview.js). Layout here; palette comes from each theme's tokens,
   mapped per flavor below so the band looks native in Orbital, Inkwash and Poster. */

.slx {
  --slx-acc: var(--accent, #39c6d4);
  --slx-card: var(--panel, rgba(12, 19, 36, .58));
  --slx-line: var(--line, rgba(140, 175, 250, .14));
  --slx-ink: var(--ink, #e9effc);
  --slx-dim: var(--ink-dim, rgba(233, 239, 252, .6));
  --slx-faint: var(--ink-faint, rgba(233, 239, 252, .35));
  --slx-ok: var(--ok, #34d399);
  --slx-warn: var(--warn, #fbbf24);
  --slx-bad: var(--err, #f87171);
  --slx-radius: var(--radius, 14px);
  --slx-mono: var(--font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
  --slx-num: var(--slx-mono);
  --slx-border: 1px solid var(--slx-line);
  --slx-shadow: none;
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  color: var(--slx-ink);
}
.slx[hidden] { display: none !important; }

.slx-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 600 12px/1.4 var(--slx-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--slx-dim); margin-bottom: 12px;
}
.slx-cap > span:first-child { color: var(--slx-ink); }

.slx-panel, .slx-strip, .slx-guide, .slx-kpi {
  background: var(--slx-card); border: var(--slx-border); border-radius: var(--slx-radius);
  box-shadow: var(--slx-shadow); padding: clamp(14px, 1.4vw, 20px); min-width: 0;
}

/* ---- KPIs */
.slx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: inherit; }
.slx-kpi { display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.slx-kpi::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--slx-acc), transparent); transform-origin: left;
  transform: scaleX(.25); transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.slx-kpi:hover::after { transform: scaleX(1); }
.slx-kpi-v { font: 700 clamp(22px, 2.3vw, 34px)/1.05 var(--slx-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.slx-kpi-v small { font-size: .5em; margin-left: 2px; color: var(--slx-dim); font-weight: 600; }
.slx-kpi-k { font: 500 11px/1.3 var(--slx-mono); letter-spacing: .12em; color: var(--slx-dim); }

/* ---- 30 day strip */
.slx-days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 64px; align-items: end; }
.slx-day { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.slx-day i {
  display: block; width: 100%; height: var(--h, 100%); border-radius: 2px; background: var(--slx-c);
  transform-origin: bottom; animation: slx-grow .7s cubic-bezier(.2, .8, .2, 1) both; transition: filter .2s, transform .2s;
}
.slx-day:nth-child(3n) i { animation-delay: .05s; } .slx-day:nth-child(3n+1) i { animation-delay: .1s; }
.slx-day:hover i { filter: brightness(1.25); transform: scaleY(1.06); }
[data-l='full'] { --slx-c: var(--slx-ok); } [data-l='good'] { --slx-c: color-mix(in srgb, var(--slx-ok) 55%, var(--slx-warn)); }
[data-l='warn'] { --slx-c: var(--slx-warn); } [data-l='bad'] { --slx-c: var(--slx-bad); }
[data-l='none'] { --slx-c: color-mix(in srgb, var(--slx-ink) 12%, transparent); }
.slx-legend { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 11px/1.4 var(--slx-mono); color: var(--slx-faint); }
.slx-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--slx-c); margin-right: 4px; vertical-align: -1px; }
@keyframes slx-grow { from { transform: scaleY(0); } }

/* ---- columns */
.slx-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: inherit; align-items: start; }
.slx-side { display: grid; gap: inherit; }
.slx-live { display: inline-flex; align-items: center; gap: 6px; color: var(--slx-acc); }
.slx-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: slx-pulse 1.6s ease-in-out infinite; }
@keyframes slx-pulse { 50% { opacity: .25; transform: scale(.7); } }

.slx-feed, .slx-fleet-list, .slx-inc-list, .slx-guide ol { list-style: none; margin: 0; padding: 0; }
.slx-feed { position: relative; max-height: 420px; overflow: auto; scrollbar-width: thin; }
.slx-feed::before { content: ''; position: absolute; left: 93px; top: 6px; bottom: 6px; width: 1px; background: var(--slx-line); }
.slx-ev {
  display: grid; grid-template-columns: 78px 50px minmax(0, 1fr); align-items: baseline; gap: 0 12px;
  padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--slx-line) 70%, transparent);
  animation: slx-in .5s both; position: relative;
}
.slx-ev:last-child { border-bottom: 0; }
.slx-ev::before { content: ''; position: absolute; left: 90px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--slx-ev, var(--slx-faint)); box-shadow: 0 0 0 3px var(--slx-card); }
.slx-ev time { font: 11px/1.3 var(--slx-mono); color: var(--slx-faint); white-space: nowrap; }
.slx-ev em { font: normal 600 11px/1.3 var(--slx-mono); color: var(--slx-ev, var(--slx-dim)); padding-left: 14px; white-space: nowrap; }
.slx-ev p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--slx-ink); overflow-wrap: anywhere; }
.slx-ev b { font-weight: 700; }
.slx-ev[data-t='in'], .slx-ev[data-t='up'] { --slx-ev: var(--slx-ok); }
.slx-ev[data-t='out'] { --slx-ev: var(--slx-dim); }
.slx-ev[data-t='down'] { --slx-ev: var(--slx-bad); }
.slx-ev[data-t='adv'] { --slx-ev: var(--slx-warn); }
.slx-ev[data-t='state'] { --slx-ev: var(--slx-acc); }
.slx-ev:nth-child(2) { animation-delay: .04s; } .slx-ev:nth-child(3) { animation-delay: .08s; } .slx-ev:nth-child(4) { animation-delay: .12s; }
.slx-ev:nth-child(n+5) { animation-delay: .16s; }
@keyframes slx-in { from { opacity: 0; transform: translateX(-8px); } }

.slx-empty { padding: 18px 0; text-align: center; font: 12px/1.5 var(--slx-mono); letter-spacing: .1em; color: var(--slx-faint); }

.slx-fleet-list li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: 'd n p' 'd g p';
  gap: 0 10px; align-items: center; padding: 9px 10px; margin: 0 -10px; border-radius: calc(var(--slx-radius) * .6);
  transition: background .2s;
}
.slx-fleet-list li[aria-current] { background: color-mix(in srgb, var(--slx-acc) 12%, transparent); }
.slx-dot { grid-area: d; width: 9px; height: 9px; border-radius: 50%; background: var(--slx-faint); }
[data-state='online'] > .slx-dot { background: var(--slx-ok); box-shadow: 0 0 0 0 var(--slx-ok); animation: slx-ring 2.2s infinite; }
[data-state='maintenance'] > .slx-dot, [data-state='starting'] > .slx-dot, [data-state='stopping'] > .slx-dot { background: var(--slx-warn); }
[data-state='offline'] > .slx-dot { background: var(--slx-bad); }
@keyframes slx-ring { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.slx-fl-name { grid-area: n; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slx-fl-game { grid-area: g; font: 11px/1.3 var(--slx-mono); color: var(--slx-faint); }
.slx-fl-p { grid-area: p; font: 600 13px/1 var(--slx-num); font-variant-numeric: tabular-nums; color: var(--slx-dim); }
[data-state='online'] > .slx-fl-p { color: var(--slx-ok); }

.slx-inc-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--slx-line); font-size: 13px; }
.slx-inc-list li:last-child { border-bottom: 0; }
.slx-inc-kind { font: 600 11px/1 var(--slx-mono); padding: 3px 6px; border-radius: 3px; color: var(--slx-bad); background: color-mix(in srgb, var(--slx-bad) 14%, transparent); }
.slx-inc-list li[data-open='1'] .slx-inc-kind { animation: slx-pulse 1.4s infinite; }
.slx-inc-t { font: 12px var(--slx-mono); color: var(--slx-dim); }
.slx-inc-d { margin-left: auto; font: 600 12px var(--slx-mono); }
.slx-inc-n { flex-basis: 100%; color: var(--slx-faint); font-size: 12px; }

/* ---- guide */
.slx-guide ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; counter-reset: s; }
.slx-guide li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'b s' 'b t'; gap: 2px 14px; align-items: center; position: relative; }
.slx-guide li:not(:last-child)::after { content: '→'; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); color: var(--slx-faint); font-family: var(--slx-mono); }
.slx-guide b { grid-area: b; font: 800 clamp(26px, 2.4vw, 38px)/1 var(--slx-num); color: var(--slx-acc); opacity: .9; }
.slx-guide strong { grid-area: s; font-size: 15px; }
.slx-guide span { grid-area: t; font-size: 12.5px; color: var(--slx-dim); line-height: 1.5; padding-right: 18px; }

/* ---- card size (theme switcher) */
html[data-card='s'] .slx-kpi-v { font-size: clamp(18px, 1.8vw, 26px); }
html[data-card='s'] .slx-days { height: 46px; }
html[data-card='l'] .slx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-card='l'] .slx-days { height: 88px; }

/* ---- responsive */
@media (max-width: 1100px) { .slx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .slx-cols { grid-template-columns: 1fr; }
  .slx-guide ol { grid-template-columns: 1fr; }
  .slx-guide li::after { display: none; }
}
@media (max-width: 520px) {
  .slx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slx-days { gap: 2px; height: 48px; }
  .slx-ev { grid-template-columns: 74px minmax(0, 1fr); }
  .slx-ev em { display: none; }
  .slx-feed::before, .slx-ev::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slx *, .slx *::before, .slx *::after { animation: none !important; transition: none !important; }
}
html[data-motion='off'] .slx *, html[data-motion='off'] .slx *::before { animation: none !important; }

/* =============================================================== flavors */

/* Orbital: glass HUD, corner ticks, glow */
.slx[data-flavor='orbital'] .slx-panel, .slx[data-flavor='orbital'] .slx-strip, .slx[data-flavor='orbital'] .slx-guide, .slx[data-flavor='orbital'] .slx-kpi {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--slx-acc) 7%, transparent), transparent 40%);
}
.slx[data-flavor='orbital'] .slx-kpi::before {
  content: ''; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px;
  border-top: 1px solid var(--slx-acc); border-right: 1px solid var(--slx-acc); opacity: .6;
}
.slx[data-flavor='orbital'] .slx-kpi-v { text-shadow: 0 0 18px color-mix(in srgb, var(--slx-acc) 45%, transparent); }
.slx[data-flavor='orbital'] .slx-day i { box-shadow: 0 0 8px color-mix(in srgb, var(--slx-c) 45%, transparent); }

/* Inkwash: paper sheets, serif numerals, seal red, soft ink edges */
.slx[data-flavor='ink'] {
  --slx-acc: var(--seal, #c2571f);
  --slx-card: var(--sheet, #faf6ea);
  --slx-num: var(--font-display, serif);
  --slx-shadow: 0 1px 0 var(--line), 0 12px 30px -22px rgba(44, 42, 34, .5);
}
.slx[data-flavor='ink'] .slx-cap { font-family: var(--font-display, serif); letter-spacing: .3em; text-transform: none; }
.slx[data-flavor='ink'] .slx-kpi { align-items: center; text-align: center; padding-block: 18px; }
.slx[data-flavor='ink'] .slx-kpi::after { left: 30%; width: 40%; height: 1px; background: var(--slx-acc); }
.slx[data-flavor='ink'] .slx-kpi-k { font-family: var(--font-display, serif); letter-spacing: .25em; }
.slx[data-flavor='ink'] .slx-day i { border-radius: 40% 40% 2px 2px; opacity: .85; }
.slx[data-flavor='ink'] [data-l='full'] { --slx-c: color-mix(in srgb, var(--ink, #2c2a22) 72%, transparent); }
.slx[data-flavor='ink'] [data-l='good'] { --slx-c: color-mix(in srgb, var(--ink, #2c2a22) 45%, transparent); }
.slx[data-flavor='ink'] [data-l='warn'] { --slx-c: color-mix(in srgb, var(--slx-acc) 60%, transparent); }
.slx[data-flavor='ink'] [data-l='bad'] { --slx-c: var(--slx-acc); }
.slx[data-flavor='ink'] .slx-guide b { font-family: var(--font-display, serif); color: var(--slx-acc); border: 1.5px solid currentColor; border-radius: 4px; padding: 6px 8px; font-size: 18px; transform: rotate(-4deg); }
.slx[data-flavor='ink'] .slx-inc-kind { border-radius: 2px; }

/* Poster: hard borders, offset shadows, grotesk numerals, acid highlights */
.slx[data-flavor='poster'] {
  --slx-acc: var(--signal, #ff4d00);
  --slx-card: var(--sheet, #fff);
  --slx-border: var(--border, 2px solid #141414);
  --slx-shadow: var(--shadow, 5px 5px 0 #141414);
  --slx-radius: 0px;
  --slx-num: var(--font-grot, 'Inter', sans-serif);
  --slx-line: color-mix(in srgb, var(--ink, #141414) 25%, transparent);
}
.slx[data-flavor='poster'] .slx-kpi { transition: transform .2s, box-shadow .2s; }
.slx[data-flavor='poster'] .slx-kpi:hover { transform: translate(-2px, -2px) rotate(-.6deg); box-shadow: 8px 8px 0 var(--ink, #141414); }
.slx[data-flavor='poster'] .slx-kpi:nth-child(1) { background: var(--slx-acc); color: #fff; }
.slx[data-flavor='poster'] .slx-kpi:nth-child(1) .slx-kpi-k, .slx[data-flavor='poster'] .slx-kpi:nth-child(1) small { color: rgba(255, 255, 255, .8); }
.slx[data-flavor='poster'] .slx-kpi:nth-child(4) { background: var(--acid, #ccff00); color: #141414; }
.slx[data-flavor='poster'] .slx-kpi:nth-child(4) .slx-kpi-k, .slx[data-flavor='poster'] .slx-kpi:nth-child(4) small { color: rgba(20, 20, 20, .7); }
.slx[data-flavor='poster'] .slx-kpi-v { font-weight: 900; font-size: clamp(26px, 2.8vw, 42px); letter-spacing: -.04em; }
.slx[data-flavor='poster'] .slx-kpi::after { display: none; }
.slx[data-flavor='poster'] .slx-days { gap: 2px; }
.slx[data-flavor='poster'] .slx-day i { border-radius: 0; }
.slx[data-flavor='poster'] .slx-cap > span:first-child { background: var(--ink, #141414); color: var(--paper, #f2efe7); padding: 3px 8px; }
.slx[data-flavor='poster'] .slx-guide b { color: var(--ink, #141414); -webkit-text-stroke: 0; background: var(--acid, #ccff00); padding: 4px 8px; font-weight: 900; }
.slx[data-flavor='poster'] .slx-inc-kind { border-radius: 0; background: var(--slx-bad); color: #fff; }

/* Paired blocks (guestbook + whitelist): when one is switched off, the other takes the full row. */
.duo:has(> [hidden]) { grid-template-columns: minmax(0, 1fr) !important; }

/* Minecraft MOTD colours (shared/js/utils.js parseMotd) — deepen the pale codes on paper/light grounds. */
html[data-mc-theme='aether']:not([data-notes-scheme='night']),
html[data-mc-theme='ember']:not([data-theme='dark']),
html[data-mc-theme='starter'][data-theme='light'] {
  --mc-c-a: #1f9d3a; --mc-c-b: #0f8f99; --mc-c-d: #b03cb0; --mc-c-e: #b07d00; --mc-c-f: #6d6a60; --mc-c-6: #c26a00; --mc-c-7: #7c786d;
}
.mc-motd-seg { text-shadow: none; }

/* Session length on online-player chips (app-core renderStatus). */
.mc-player-dur {
  margin-left: .5em; padding-left: .5em; font-size: .82em; opacity: .7; font-variant-numeric: tabular-nums;
  border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 35%, transparent);
}

/* event feed stretches to the height of the fleet/incident column */
@media (min-width: 861px) {
  .slx-cols { align-items: stretch; }
  .slx-events { display: flex; flex-direction: column; }
  .slx-events .slx-feed { flex: 1; max-height: none; }
}

/* 在线时长榜：人数多时在卡片内滚动，不再撑高同排的 24 小时图表 */
.leaderboard { max-height: var(--lb-max, 360px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html[data-card='s'] .leaderboard { --lb-max: 300px; }
html[data-card='l'] .leaderboard { --lb-max: 460px; }