/* ============================================================
   FISH GANG CO. — LEGACY TOS CONTENT OVERLAY
   Restyles the existing semantic class names used inside preserved
   legal copy (container / hero / doc-card / tos-section / data-table
   etc.) using the new theme's tokens. No legal text is altered —
   only presentation.
   ============================================================ */
.tos-wrap .container { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-4); }
.tos-wrap .hero { text-align: center; padding: var(--sp-5) 0 var(--sp-4); }
.tos-wrap .hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--text); }
.tos-wrap .hero .badge {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--accent);
  margin-top: var(--sp-2);
  font-family: var(--font-display);
}
.tos-wrap .hero .date { color: var(--text-dim); margin-top: var(--sp-2); font-size: 0.85rem; }

.tos-wrap .doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.tos-wrap .card-header {
  background: var(--surface-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.tos-wrap .card-header h2 { font-size: 1.3rem; color: var(--accent); margin: 0; }
.tos-wrap .card-content { padding: var(--sp-4); }

.tos-wrap .tos-section {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.tos-wrap .tos-section h3 { font-size: 1.05rem; color: var(--accent); margin-bottom: var(--sp-2); }
.tos-wrap .tos-section p,
.tos-wrap .tos-section li { color: var(--text-dim); }
.tos-wrap .tos-section ul,
.tos-wrap .tos-section ol { padding-left: 1.4rem; margin: var(--sp-2) 0; }

.tos-wrap .code-block {
  background: var(--deep);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent);
}
.tos-wrap .danger-note {
  background: rgba(224, 101, 79, 0.1);
  border-left: 3px solid var(--danger);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  margin: var(--sp-3) 0;
  color: var(--text);
}
.tos-wrap .data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--deep);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--sp-3) 0;
  font-size: 0.88rem;
}
.tos-wrap .data-table th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.tos-wrap .data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: top;
}
.tos-wrap hr { border-color: var(--border); margin: var(--sp-3) 0; }
.tos-wrap .footnote {
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-dim);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}

/* generic fallback for any older TOS pages that used .section/.version-card naming */
.tos-wrap .section {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.tos-wrap .section h2 { color: var(--accent); font-size: 1.2rem; margin-bottom: var(--sp-2); }
.tos-wrap .section p,
.tos-wrap .section li { color: var(--text-dim); }
.tos-wrap .section ul { list-style: none; padding-left: 0; }
.tos-wrap .section li { padding: 6px 0 6px 22px; position: relative; }
.tos-wrap .section li::before { content: "✓"; color: var(--accent); position: absolute; left: 0; }

.tos-wrap .version-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
html[data-motion="static"] .tos-wrap .version-card { transition: none; }
.tos-wrap .version-card:hover { border-color: var(--accent); }
.tos-wrap .version-card h2 { color: var(--accent); font-size: 1.3rem; margin-bottom: var(--sp-1); }
.tos-wrap .version-card p { color: var(--text-dim); margin: 0; }