/* ============================================================================
   team_news.css — GATE 4 Team News tab + availability chips
   Scoped: every selector is .tn- prefixed. Built on the style.css custom
   properties so body.night inherits automatically; explicit body.night
   overrides only where tinted backgrounds need reversal (same pattern as
   the night-mode hover overrides at style.css "NIGHT MODE" block).
   ========================================================================= */

/* ---- banners ---- */
.tn-banner {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-muted, #666);
  background: var(--color-surface);
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.tn-banner-danger { border-left-color: var(--color-danger); background: rgba(198, 40, 40, 0.06); }
.tn-banner-warn   { border-left-color: var(--color-warning); background: rgba(184, 111, 28, 0.06); }
.tn-banner-info   { border-left-color: var(--color-primary-text); background: rgba(0, 255, 135, 0.06); }
body.night .tn-banner-danger { background: rgba(248, 107, 107, 0.10); }
body.night .tn-banner-warn   { background: rgba(227, 160, 100, 0.10); }
body.night .tn-banner-info   { background: rgba(0, 255, 135, 0.08); }

/* ---- chips (rotationChip output + suspension chips) ---- */
.tn-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: var(--space-1);
  vertical-align: middle;
  white-space: nowrap;
}
.tn-chip-hard     { background: var(--color-danger); color: #fff; }
.tn-chip-bench    { background: rgba(198, 40, 40, 0.12); color: var(--color-danger); border: 1px solid var(--color-danger); }
.tn-chip-rotation { background: rgba(184, 111, 28, 0.12); color: var(--color-warning); border: 1px solid var(--color-warning); }
body.night .tn-chip-bench    { background: rgba(248, 107, 107, 0.15); }
body.night .tn-chip-rotation { background: rgba(227, 160, 100, 0.15); }

/* ---- club cards ---- */
.tn-club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.tn-club-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.tn-club-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider, var(--color-border));
  padding-bottom: var(--space-2);
}
.tn-club-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}
.tn-conf {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.tn-conf-high { background: rgba(0, 255, 135, 0.15); color: var(--color-primary-text); }
.tn-conf-med  { background: rgba(184, 111, 28, 0.12); color: var(--color-warning); }
.tn-conf-low  { background: rgba(0, 0, 0, 0.07); color: var(--color-text-muted, #666); }
body.night .tn-conf-low { background: rgba(255, 255, 255, 0.08); }

.tn-xi { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.tn-xi-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 0;
  border-bottom: 1px dashed var(--color-divider, var(--color-border));
  font-size: var(--text-sm);
}
.tn-xi-player:last-child { border-bottom: none; }
.tn-xi-name { color: var(--color-text); }
.tn-xi-meta { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }
.tn-pct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text);
}
.tn-pct-p60 { color: var(--color-text-muted, #666); }

.tn-presser {
  font-size: var(--text-sm);
  color: var(--color-text-muted, #444);
  font-style: italic;
  margin: var(--space-2) 0 0;
}
.tn-basis { margin-top: var(--space-2); font-size: var(--text-xs); }
.tn-basis summary { cursor: pointer; color: var(--color-text-muted, #666); font-family: var(--font-mono); }
.tn-basis-item { color: var(--color-text-muted, #666); margin-top: 2px; }

/* ---- status-diff block ---- */
.tn-diff-block { margin-top: var(--space-6); }
.tn-diff-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.tn-diff-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: 0;
}
.tn-filters { display: flex; gap: var(--space-1); }
.tn-filter-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted, #555);
  cursor: pointer;
}
.tn-filter-btn:hover { border-color: var(--color-text-muted, #888); }
.tn-filter-active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.tn-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 255, 135, 0.18);
  color: var(--color-primary-text);
  vertical-align: middle;
}
.tn-tag-watch { background: rgba(0, 0, 0, 0.08); color: var(--color-text-muted, #555); }
body.night .tn-tag-watch { background: rgba(255, 255, 255, 0.10); }

.tn-empty { color: var(--color-text-faint, #999); font-style: italic; }

/* ---- status-diff feed: direction marks + suspension watch row ---- */
.tn-dir-worse  { color: var(--color-danger); font-weight: 700; }
.tn-dir-better { color: var(--color-primary-text); font-weight: 700; }
.tn-dir-info   { color: var(--color-text-muted, #666); }
.tn-susp-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #666);
}
.tn-susp-owned { box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.35); }
body.night .tn-susp-owned { box-shadow: 0 0 0 2px rgba(248, 107, 107, 0.4); }

/* ---- mobile ---- */
@media (max-width: 480px) {
  .tn-club-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .tn-club-card { padding: var(--space-3); }
  .tn-diff-head { flex-direction: column; align-items: flex-start; }
  .tn-filters { width: 100%; }
  .tn-filter-btn { flex: 1; text-align: center; }
  .tn-diff-table th, .tn-diff-table td { font-size: var(--text-xs); padding: 6px 6px; }
  .tn-banner { font-size: var(--text-xs); }
  .tn-xi-meta { justify-content: flex-start; }
}