/* Key Facts — single-view infobox + chips + share + cta + related */
.kf-wrap {
  --kf-bg:        var(--bg-card, #ffffff);
  --kf-bg-soft:   var(--bg-light, #f6f8fa);
  --kf-text:      var(--text-main, #1d2433);
  --kf-text-soft: var(--text-muted, #5e6573);
  --kf-headline:  var(--text-dark, #0a2540);
  --kf-border:    var(--border-color, rgba(127,127,127,0.18));
  --kf-accent:    var(--lx-primary, #1e6dc2);
  --kf-accent-soft: rgba(30,109,194,0.12);
  --kf-radius: 12px;
  --kf-radius-sm: 8px;
  color: var(--kf-text);
  font-family: inherit;
  max-width: 100%;
}

/* header — centered top block */
.kf-header { margin-bottom: 1.25rem; text-align: center; }
.kf-title {
  font-size: 1.6rem; font-weight: 700; color: var(--kf-headline);
  margin: 0 0 .85rem; line-height: 1.2;
}

/* category chips — centered to match header */
.kf-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;
  justify-content: center;
}
.kf-chip {
  appearance: none; background: var(--kf-bg); border: 1px solid var(--kf-border);
  border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; color: var(--kf-text-soft);
  cursor: pointer; transition: all .15s;
}
.kf-chip:hover { border-color: var(--kf-accent); color: var(--kf-accent); }
.kf-chip.is-active {
  background: var(--kf-accent); border-color: var(--kf-accent); color: #fff; font-weight: 600;
}

/* infobox */
.kf-section { margin-bottom: 1.75rem; }
.kf-section-title {
  font-size: .8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kf-text-soft); font-weight: 700;
  border-bottom: 1px solid var(--kf-border);
  padding-bottom: .4rem; margin: 0 0 .65rem;
}
.kf-dl { margin: 0; padding: 0; }
.kf-row {
  display: grid; grid-template-columns: 38% 1fr; gap: .85rem;
  padding: .7rem 0; border-bottom: 1px dashed var(--kf-border);
}
.kf-row:last-child { border-bottom: 0; }
.kf-dt {
  margin: 0; font-weight: 600; color: var(--kf-headline);
  font-size: .95rem; line-height: 1.4;
}
.kf-dd { margin: 0; color: var(--kf-text); font-size: .95rem; line-height: 1.55; }
.kf-star {
  color: #f5a623; margin-left: .35rem; font-size: .75rem;
  cursor: help; vertical-align: top;
}

/* responsive */
@media (max-width: 600px) {
  .kf-row { grid-template-columns: 1fr; gap: .2rem; }
  .kf-dt {
    color: var(--kf-text-soft); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .kf-title { font-size: 1.35rem; }
}

/* empty state */
.kf-empty { text-align: center; padding: 2rem 1rem; }
.kf-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 2.5rem 1.5rem; background: var(--kf-bg-soft);
  border: 1px dashed var(--kf-border); border-radius: var(--kf-radius);
  max-width: 540px; margin: 1rem auto;
}
.kf-empty-icon { font-size: 2.5rem; color: var(--kf-text-soft); opacity: .6; }
.kf-empty-msg { margin: 0; color: var(--kf-text); font-size: 1rem; line-height: 1.6; }
.kf-empty-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1.1rem; background: var(--kf-bg); border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius-sm); color: var(--kf-accent); text-decoration: none;
  font-size: .9rem; font-weight: 600; transition: all .15s;
}
.kf-empty-cta:hover { background: var(--kf-accent-soft); border-color: var(--kf-accent); }

/* share tools — inline-flex; parent .kf-header centers them */
.kf-share-tools {
  display: inline-flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem;
  justify-content: center;
}
.kf-share-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--kf-bg-soft); border: 1px solid var(--kf-border);
  color: var(--kf-text-soft); cursor: pointer; text-decoration: none;
  font-size: .9rem; transition: all .15s;
}
.kf-share-btn:hover {
  background: var(--kf-accent); color: #fff; border-color: var(--kf-accent);
}
.kf-share-btn.is-copied {
  background: #2da765; color: #fff; border-color: #2da765;
}

/* cta strip */
.kf-cta-strip {
  margin: 2rem 0 1.5rem; padding: 1.25rem;
  background: var(--kf-bg); border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}
.kf-cta-title {
  font-size: .8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kf-text-soft); font-weight: 700; margin-bottom: .85rem;
}
.kf-cta-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.kf-cta-card {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem; background: var(--kf-bg-soft);
  border: 1px solid var(--kf-border); border-radius: var(--kf-radius-sm);
  color: var(--kf-text); text-decoration: none; transition: all .15s;
}
.kf-cta-card:hover {
  border-color: var(--kf-accent); color: var(--kf-accent);
  transform: translateX(2px);
}
.kf-cta-icon { color: var(--kf-accent); font-size: 1rem; flex-shrink: 0; }
.kf-cta-label { flex: 1; font-size: .92rem; font-weight: 500; }
.kf-cta-arrow {
  color: var(--kf-text-soft); font-size: .75rem; opacity: .5;
  transition: opacity .15s;
}
.kf-cta-card:hover .kf-cta-arrow { opacity: 1; color: var(--kf-accent); }

/* related-by-writer */
.kf-related {
  margin-top: 1.5rem; padding: 1.25rem;
  background: var(--kf-bg-soft); border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius);
}
.kf-related-title {
  font-size: .85rem; color: var(--kf-text-soft); margin-bottom: .85rem;
}
.kf-related-title a {
  color: var(--kf-accent); text-decoration: none; font-weight: 600;
}
.kf-related-title a:hover { text-decoration: underline; }
.kf-related-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.kf-related-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .85rem; background: var(--kf-bg);
  border: 1px solid var(--kf-border); border-radius: var(--kf-radius-sm);
  color: var(--kf-text); text-decoration: none; font-size: .9rem;
  transition: all .15s;
}
.kf-related-link:hover { border-color: var(--kf-accent); color: var(--kf-accent); }
.kf-related-icon { color: var(--kf-text-soft); font-size: .85rem; }
.kf-related-link:hover .kf-related-icon { color: var(--kf-accent); }

/* print stylesheet */
@media print {
  .kf-chips,
  .kf-share-tools,
  .kf-cta-strip,
  .kf-related { display: none !important; }

  .kf-wrap { color: #000; max-width: 100%; }
}