/*
 * RTOFlow brand symbols.
 *
 * Rendered by the Jinja `symbol(key, size)` global and the matching
 * RTOFSymbol JS helper. The actual <picture> uses width / height
 * attributes (set inline in the macro) so the browser reserves space
 * before the WebP decodes — this avoids any CLS regression versus the
 * old text emojis.
 */

.rtof-symbol {
  display: inline-block;
  vertical-align: -0.125em; /* sit on the text baseline like an emoji */
  line-height: 1;
}

.rtof-symbol > img,
.rtof-symbol > source {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

/* Size variants — keep in sync with SIZE_ALIASES in app/symbols/__init__.py */
.rtof-symbol--16 { width: 16px; height: 16px; }
.rtof-symbol--20 { width: 20px; height: 20px; }
.rtof-symbol--24 { width: 24px; height: 24px; }
.rtof-symbol--32 { width: 32px; height: 32px; }
.rtof-symbol--48 { width: 48px; height: 48px; }
.rtof-symbol--64 { width: 64px; height: 64px; }
.rtof-symbol--96 { width: 96px; height: 96px; }
.rtof-symbol--128 { width: 128px; height: 128px; }

/* Inline-with-text helper: nudges the symbol to align with leading caps. */
.rtof-symbol--inline {
  vertical-align: -0.225em;
  margin-right: 0.25em;
}

/* Missing-key fallback (renders only when a template references an unknown key). */
.rtof-symbol--missing {
  outline: 2px dashed var(--accent-purple, #6e3bff);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(110, 59, 255, 0.08) 0 4px,
      rgba(110, 59, 255, 0.16) 4px 8px
    );
  border-radius: 22%;
}

/* Admin Symbol Library catalogue grid. */
.symbol-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.symbol-library-card {
  background: var(--surface-bg-elevated, #fff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.symbol-library-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg,
      rgba(110, 59, 255, 0.06),
      rgba(110, 59, 255, 0.02));
  border-radius: 8px;
  height: 96px;
}

.symbol-library-card__key {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text-primary, #111);
  font-weight: 600;
  word-break: break-all;
}

.symbol-library-card__purpose {
  font-size: 12px;
  color: var(--text-secondary, #555);
  line-height: 1.35;
}

.symbol-library-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary, #777);
  margin-top: 4px;
}

.symbol-library-card__meta span {
  background: var(--surface-bg, rgba(0, 0, 0, 0.04));
  padding: 2px 6px;
  border-radius: 999px;
}

.symbol-library-card__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text-secondary, #555);
}

.symbol-library-card__copy:hover {
  background: var(--surface-bg, rgba(0, 0, 0, 0.04));
  color: var(--text-primary, #111);
}