/* ════════════════════════════════════════════
   KNOWLEDGE BYTES — PAGE STYLES
   Dark intelligence feed aesthetic
   ════════════════════════════════════════════ */

:root {
  --kb-bg:       #ffffff;
  --kb-surface:  #f8f9fb;
  --kb-card:     #ffffff;
  --kb-border:   rgba(13,15,26,0.09);
  --kb-text:     rgba(13,15,26,0.85);
  --kb-muted:    rgba(13,15,26,0.42);
  --kb-accent:   #1a6cf5;
  --kb-green:    #1a7a4a;
  --kb-amber:    #d97706;
  --kb-red:      #dc2626;
  --kb-cyan:     #0891b2;
  --kb-purple:   #7c3aed;
  --kb-dark:     #57534D;
  --kb-navy:     #34495E;
  --kb-cloud:    #D6DBDF;
}

/* ── Page shell ── */
.kb-page { background: var(--kb-bg); min-height: 100vh; }

/* ── Hero strip ── */
.kb-hero {
  background: var(--kb-bg);
  border-bottom: 1px solid rgba(13,15,26,0.08);
  padding: 52px 0 40px;
}
.kb-hero__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.kb-hero__label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--kb-muted);
  text-transform: uppercase;
  margin-top: 40px;
  margin-bottom: 10px;
}
.kb-hero__title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 5vw, 5rem);
  font-weight: 800;
  color: var(--bg-red);
  text-transform: uppercase;
  line-height: 0.93;
  letter-spacing: -0.01em;
}
.kb-hero__title em {
  font-style: normal;
  color: var(--kb-cloud);
}
.kb-hero__sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: rgba(13,15,26,0.45);
  margin-top: 12px;
  letter-spacing: 0.06em;
}
.kb-hero__meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  color: rgba(13,15,26,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  gap: 20px;
  align-items: center;
}
.kb-hero__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kb-green);
  animation: kbPulse 2s infinite;
  display: inline-block;
}
@keyframes kbPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Cards grid ── */
.kb-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Individual card ── */
.kb-card {
  background: var(--kb-card);
  border: 1px solid var(--kb-border);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  height: 520px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
.kb-card:hover { border-color: rgba(255,255,255,0.14); }

/* Top accent bar per card */
.kb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kc-accent, var(--kb-accent));
}

/* Card accent colours */
.kb-card--defense  { --kc-accent: var(--kb-dark);    --kc-tag: rgba(13,15,26,0.08);   --kc-tag-text: #57534D; }
.kb-card--ai-tech  { --kc-accent: var(--kb-dark);    --kc-tag: rgba(13,15,26,0.08);   --kc-tag-text: #57534D; }
.kb-card--ai-def   { --kc-accent: var(--kb-dark);    --kc-tag: rgba(13,15,26,0.08);   --kc-tag-text: #57534D; }
.kb-card--fintech  { --kc-accent: var(--kb-dark);    --kc-tag: rgba(13,15,26,0.08);   --kc-tag-text: #57534D; }
.kb-card--diplo    { --kc-accent: var(--kb-dark);    --kc-tag: rgba(13,15,26,0.08);   --kc-tag-text: #57534D; }
.kb-card--miltech  { --kc-accent: var(--kb-dark);    --kc-tag: rgba(13,15,26,0.08);   --kc-tag-text: #57534D; }

/* ── Card header ── */
.kb-card__head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(13,15,26,0.08);
  flex-shrink: 0;
}
.kb-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kb-card__icon {
  width: 24px; height: 24px;
  border-radius: 3px;
  background: var(--kc-tag);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--kc-tag-text);
}
.kb-card__title {
  font-family: var(--font-saira);
  font-size: 0.70rem;
  font-weight: 700;
  color: #0d0f1a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.kb-card__count {
  margin-left: auto;
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  color: var(--kb-muted);
  background: rgba(13,15,26,0.06);
  padding: 2px 6px;
  border-radius: 2px;
}

/* ── Search bar ── */
.kb-search {
  position: relative;
}
.kb-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--kc-tag-text, var(--kb-accent));
  pointer-events: none;
  user-select: none;
  font-weight: 700;
}
.kb-search__input {
  width: 100%;
  background: #f4f5f7;
  border: 1px solid rgba(13,15,26,0.1);
  border-radius: 3px;
  padding: 7px 10px 7px 28px;
  font-family: 'Roboto', monospace;
  font-size: 0.55rem;
  color: #0d0f1a;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.kb-search__input::placeholder {
  color: rgba(13,15,26,0.25);
}
.kb-search__input:focus {
  border-color: var(--kc-accent, var(--kb-accent));
  background: #ececee;
}

/* ── Feed scroll area ── */
.kb-feed {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(13,15,26,0.15) transparent;
}
.kb-feed::-webkit-scrollbar { width: 4px; }
.kb-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Feed states ── */
.kb-feed__loading,
.kb-feed__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 20px;
  text-align: center;
}
.kb-feed__spinner {
  width: 22px; height: 22px;
  border: 2px solid rgba(13,15,26,0.1);
  border-top-color: var(--kc-accent, var(--kb-accent));
  border-radius: 50%;
  animation: kbSpin 0.8s linear infinite;
}
@keyframes kbSpin { to { transform: rotate(360deg); } }
.kb-feed__loading-text,
.kb-feed__empty-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  color: rgba(13,15,26,0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Feed item ── */
.kb-item {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(13,15,26,0.05);
  cursor: default;
  transition: background 0.15s;
}
.kb-item:hover { background: rgba(13,15,26,0.025); }
.kb-item--hidden { display: none; }

.kb-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.kb-item__source {
  font-family: 'DM Mono', monospace;
  font-size: 0.50rem;
  color: var(--kc-tag-text, var(--kb-accent));
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.kb-item__dot { color: rgba(255,255,255,0.15); font-size: 0.5rem; }
.kb-item__time {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  color: var(--kb-muted);
  margin-left: auto;
}
.kb-item__relevance {
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  color: var(--kb-muted);
  background: rgba(13,15,26,0.06);
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
}
.kb-item__relevance--high {
  color: var(--kc-tag-text);
  background: var(--kc-tag);
}
.kb-item__headline {
  font-family: var(--font-heading);
  font-size: 0.70rem;
  font-weight: 600;
  color: #0d0f1a;
  line-height: 1.35;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.kb-item__summary {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  color: var(--kb-muted);
  line-height: 1.55;
}
.kb-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.kb-item__tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  color: var(--kc-tag-text, var(--kb-accent));
  background: var(--kc-tag, rgba(26,108,245,0.12));
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s;
}
.kb-item__tag:hover { opacity: 0.7; }

/* ── Market card specifics ── */
.kb-market-row {
  padding: 9px 16px;
  border-bottom: 1px solid rgba(13,15,26,0.05);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.kb-market-row__region {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  color: var(--kb-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kb-market-row__index {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0d0f1a;
}
.kb-market-row__change {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
  min-width: 56px;
  text-align: right;
}
.kb-market-row__change--up   { color: #4ade80; background: rgba(26,122,74,0.15); }
.kb-market-row__change--down { color: #f87171; background: rgba(220,38,38,0.15); }
.kb-market-row__change--flat { color: var(--kb-muted); background: rgba(255,255,255,0.05); }

.kb-market-headline {
  padding: 8px 16px 6px;
  font-family: var(--font-heading);
  font-size: 0.60rem;
  font-weight: 700;
  color: var(--kb-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ── Error state ── */
.kb-feed__error {
  padding: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  color: rgba(248,113,113,0.7);
  text-align: center;
}

/* ── Card footer ── */
.kb-card__foot {
  padding: 8px 16px;
  border-top: 1px solid var(--kb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.kb-card__foot-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  color: rgba(13,15,26,0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kb-refresh-btn {
  background: var(--p-alert);
  border: 1px solid rgba(13,15,26,0.12);
  color: var(--p-white);
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  padding: 3px 9px;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}
.kb-refresh-btn:hover {
  border-color: var(--kc-accent, var(--kb-accent));
  color: var(--p-white, var(--kb-accent));
}

/* ── Last updated ── */
.kb-card__updated {
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  color: rgba(13,15,26,0.25);
  padding: 0 16px 8px;
  text-align: right;
  flex-shrink: 0;
}

/* ── No results ── */
.kb-no-results {
  padding: 24px 16px;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  color: var(--kb-muted);
  display: none;
}
.kb-no-results.kb-visible { display: block; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .kb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .kb-grid { grid-template-columns: 1fr; }
  .kb-card { height: 440px; }
}