/* Angel public features: shared card, grid, box and note styles (kf-*) for boards, My settings, awards, server pages and browser games.
   Owned by the boards/settings module; the other features only USE these classes. Builds on the Aurora tokens (--ka-*). Mobile first; 44px touch targets;
   reduced motion respected. */
.kf { display: grid; gap: 1.25rem; align-content: start; padding-block: 1.25rem 3rem; min-width: 0; }
.kf-narrow { max-width: 46rem; margin-inline: auto; }
.kf-hero .ka-hero__title { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }

.kf-card {
  display: grid; gap: 0.9rem; min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--ka-line-gold, rgba(214, 172, 76, 0.26));
  border-radius: var(--ka-r-md, 14px);
  background: var(--ka-grad-surface, rgba(26, 20, 34, 0.94));
  box-shadow: var(--ka-shadow-sm, none);
}
.kf-card h1, .kf-card h2 { margin: 0; font-family: var(--ka-font-display, serif); color: var(--ka-ivory, #f4ebda); overflow-wrap: anywhere; }
.kf-card h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.kf-card h2 { font-size: 1.4rem; }
.kf-card p { margin: 0; overflow-wrap: anywhere; }
.kf-danger { border-color: var(--ka-line-crimson, rgba(240, 74, 78, 0.45)); }
.kf-veto.is-on { border-color: var(--ka-line-crimson, rgba(240, 74, 78, 0.6)); }
.kf-faint { color: var(--ka-ivory-mute, #b2a797); font-size: 0.9rem; margin: 0; }
.kf-explain { color: var(--ka-ivory-dim, #cfc4b4); }
.kf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.kf-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0; }
.kf-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.kf-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.kf-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--ka-line-gold, rgba(214, 172, 76, 0.26)); color: var(--ka-gold-200, #f3dfa0); background: rgba(16, 13, 23, 0.55);
}

/* notes and flashes */
.kf-flashes { display: grid; gap: 0.5rem; }
.kf-flashes:empty { display: none; }
.kf-note { margin: 0; padding: 0.7rem 1rem; border-radius: var(--ka-r-sm, 8px); border: 1px solid var(--ka-line-gold, rgba(214, 172, 76, 0.26)); color: var(--ka-ivory-dim, #cfc4b4); background: rgba(16, 13, 23, 0.55); overflow-wrap: anywhere; }
.kf-note--success { border-color: rgba(127, 197, 154, 0.5); color: var(--ka-ok, #7fc59a); }
.kf-note--error { border-color: rgba(255, 107, 107, 0.55); color: var(--ka-down, #ff6b6b); }
.kf-note--warning { border-color: rgba(230, 179, 80, 0.5); color: var(--ka-warn, #e6b350); }
.kf-note--info { border-color: rgba(143, 180, 214, 0.45); color: var(--ka-info, #8fb4d6); }

/* forms */
.kf-form { display: grid; gap: 1rem; margin: 0; }
.kf-field { display: grid; gap: 0.4rem; min-width: 0; }
.kf-field label { font-weight: 700; color: var(--ka-gold-200, #f3dfa0); }
.kf-form input[type="text"], .kf-form select, .kf-inline input[type="text"], .kf-inline select {
  min-height: 44px; padding: 0.55rem 0.8rem; font: inherit; color: var(--ka-ivory, #f4ebda); min-width: 0;
  background: var(--ka-obsidian, #100d17); border: 1px solid var(--ka-line-gold, rgba(214, 172, 76, 0.26)); border-radius: var(--ka-r-sm, 8px);
}
.kf-form input:focus-visible, .kf-form select:focus-visible, .kf-inline input:focus-visible, .kf-inline select:focus-visible { outline: 2px solid var(--ka-gold-300, #e8c872); outline-offset: 2px; }

/* tick boxes: plain, one per choice, never pre-ticked */
.kf-group { display: grid; gap: 0.7rem; margin: 0; padding: 0.9rem 1rem 1rem; border: 1px solid var(--ka-line, rgba(244, 235, 218, 0.09)); border-radius: var(--ka-r-sm, 8px); min-width: 0; }
.kf-group__title { padding: 0 0.4rem; font-weight: 800; color: var(--ka-gold-200, #f3dfa0); letter-spacing: 0.02em; }
.kf-box { display: grid; gap: 0.25rem; min-width: 0; }
.kf-box__row { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; cursor: pointer; }
.kf-box__input { width: 1.35rem; height: 1.35rem; flex: none; accent-color: var(--ka-crimson-500, #d02a3a); }
.kf-box__input:focus-visible { outline: 2px solid var(--ka-gold-300, #e8c872); outline-offset: 3px; }
.kf-box__label { font-weight: 700; color: var(--ka-ivory, #f4ebda); overflow-wrap: anywhere; }
.kf-box__explain { margin: 0 0 0 2.05rem; color: var(--ka-ivory-dim, #cfc4b4); font-size: 0.92rem; line-height: 1.45; }
.kf-box__note { margin: 0 0 0 2.05rem; color: var(--ka-warn, #e6b350); font-size: 0.88rem; }
.kf-box.is-disabled .kf-box__row, .kf-box.is-disabled .kf-box__explain { opacity: 0.6; cursor: not-allowed; }
.kf-box__state { margin: 0 0 0 2.05rem; font-size: 0.85rem; color: var(--ka-ivory-dim, #cfc4b4); }
.kf-box__state:empty { display: none; }
.kf-box.is-pending .kf-box__state { color: var(--ka-warn, #e6b350); }
.kf-box.is-failed .kf-box__state { color: var(--ka-crimson-300, #ff7b86); }
.kf-box.is-saved .kf-box__state { color: var(--ka-gold-300, #e8c872); }
.kf-server { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; padding-top: 0.4rem; border-top: 1px dashed var(--ka-line, rgba(244, 235, 218, 0.09)); }
.kf-server__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-top: 0.7rem; border-radius: 50%; overflow: hidden; background: var(--ka-velvet, #2a2036); color: var(--ka-gold-200, #f3dfa0); font-weight: 800; font-size: 0.8rem; }
.kf-server__icon img { width: 100%; height: 100%; object-fit: cover; }

.kf-state .kf-actions { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .kf * { transition: none !important; animation: none !important; } }