/* Match-notes editor + render surface.
 *
 * Replaces the runtime `<style>`-injector that used to live in
 * web/src/screens/matches/noteStyles.ts. CSP3's `style-src-elem 'self'`
 * forbids inline `<style>` blocks; an external stylesheet linked from
 * index.html is the sanctioned path.
 *
 * Reads the theme palette via CSS vars set by tokens.tsx::applyAppearance
 * (--fab-text, --fab-text-dim, --fab-text-muted, --fab-border,
 * --fab-panel2 + --accent). Fallbacks are dark-theme defaults so the
 * sheet renders sanely before tokens.tsx runs.
 */

.match-notes,
.match-editor-surface {
  color: var(--fab-text, #F2EFE8);
}

.match-notes h2,
.match-editor-surface h2 {
  font-size: 16px;
  margin: 8px 0 6px;
  font-weight: 600;
  color: var(--fab-text, #F2EFE8);
}

.match-notes h3,
.match-editor-surface h3 {
  font-size: 13px;
  margin: 8px 0 4px;
  font-weight: 600;
  color: var(--fab-text, #F2EFE8);
  letter-spacing: 0.3px;
}

.match-notes p,
.match-editor-surface p {
  margin: 6px 0;
}

.match-notes ul,
.match-notes ol,
.match-editor-surface ul,
.match-editor-surface ol {
  margin: 6px 0 6px 22px;
}

.match-notes blockquote,
.match-editor-surface blockquote {
  margin: 6px 0;
  padding: 4px 12px;
  border-left: 2px solid var(--accent, #B8924A);
  color: var(--fab-text-dim, #9aa0a6);
}

.match-notes img,
.match-editor-surface img {
  max-width: 100%;
  border: 1px solid var(--fab-border, #22262b);
  border-radius: 4px;
  margin: 6px 0;
}

.match-notes table,
.match-editor-surface table {
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 12px;
}

.match-notes th,
.match-notes td,
.match-editor-surface th,
.match-editor-surface td {
  border: 1px solid var(--fab-border, #22262b);
  padding: 4px 8px;
  text-align: left;
}

.match-notes th,
.match-editor-surface th {
  background: var(--fab-panel2, #16191d);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fab-text-muted, #878b90);
}

.match-editor-surface:empty:before {
  content: attr(data-placeholder);
  color: var(--fab-text-muted, #878b90);
}