/**
 * TaleO Today — shared brand tokens and O accent mark.
 */
:root {
  --brand-o-accent: #6366F1;
  --brand-o-accent-alt: #FFB547;
}

.brand-mark {
  font-weight: inherit;
  letter-spacing: inherit;
}

.brand-mark .brand-o {
  color: var(--brand-o-accent);
  font-weight: 700;
}

.brand-mark--preopen .brand-o,
.preopen-page .brand-mark .brand-o {
  color: var(--brand-o-accent-alt);
}

[data-theme="light"] .brand-mark .brand-o,
.appweb-page .brand-mark .brand-o {
  color: #7c5cf5;
}

.backronym-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.backronym-letter {
  background: var(--bg-card, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 12px;
}

.backronym-letter__inner,
.backronym-letter__face {
  display: contents;
}

.backronym-letter__glyph {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}

.backronym-letter__word {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.backronym-letter__label {
  display: block;
  font-size: 12px;
  opacity: 0.85;
}

.backronym-letter__back-label {
  display: none;
}

.backronym-letter__desc {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
}

.backronym-letter--accent {
  border-color: color-mix(in srgb, var(--brand-o-accent) 45%, transparent);
}

.backronym-letter--accent .backronym-letter__glyph {
  color: var(--brand-o-accent);
}

.preopen-page .backronym-letter--accent {
  border-color: color-mix(in srgb, var(--brand-o-accent-alt) 50%, transparent);
}

.preopen-page .backronym-letter--accent .backronym-letter__glyph {
  color: var(--brand-o-accent-alt);
}

.backronym-section__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.backronym-section__group {
  margin-bottom: 18px;
}