/* bk_alerts.css — the price-alert control and the alerts screen (2026-09-17).
   Theme tokens only (janet_premium.css): text on the gold accent is --on-sky. */

.bka-follow { margin: 12px 0; display: grid; gap: 8px; }
.bka-follow__btn,
.bka-follow__ok,
.bka-follow__cancel,
.bka-card__actions button {
  font: inherit; font-weight: 600; min-height: 44px; padding: 0 16px; border-radius: var(--jp-r-pill, 999px);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--jp-line, rgba(245,243,239,.16)); background: var(--jp-raised, #16181C); color: var(--jp-text, #F5F3EF);
  transition: border-color var(--jp-fast, 160ms) var(--jp-out, ease-out), background-color var(--jp-fast, 160ms) var(--jp-out, ease-out);
}
.bka-follow__btn { justify-self: start; }
.bka-follow__btn:hover,
.bka-card__actions button:hover { border-color: var(--jp-gold, #C9A24A); }
.bka-follow__ok { background: var(--jp-gold, #C9A24A); border-color: var(--jp-gold, #C9A24A); color: var(--on-sky, #12141A); }
.bka-follow__ok:hover { background: var(--jp-gold-warm, #B58C33); }
.bka-follow__ok:disabled, .bka-card__actions button:disabled { opacity: .6; cursor: progress; }
.bka-follow__btn:focus-visible, .bka-follow__ok:focus-visible, .bka-follow__cancel:focus-visible,
.bka-card__actions button:focus-visible, .bka-follow__budget input:focus-visible {
  outline: 3px solid var(--jp-gold, #C9A24A); outline-offset: 2px;
}
.bka-ico { flex: none; }
.bka-follow__panel {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--jp-r, 12px);
  background: var(--jp-raised, #16181C); border: 1px solid var(--jp-line-soft, rgba(245,243,239,.085));
  max-width: 62ch;
}
.bka-follow__what, .bka-follow__note { margin: 0; color: var(--jp-text-2, #B4B8BF); font-size: 14px; line-height: 1.6; }
.bka-follow__note { font-size: 13px; }
.bka-follow__budget { display: grid; gap: 6px; font-size: 14px; color: var(--jp-text, #F5F3EF); }
.bka-follow__budget input {
  font: inherit; min-height: 44px; max-width: 14ch; padding: 0 12px; border-radius: var(--jp-r-sm, 6px);
  border: 1px solid var(--jp-line, rgba(245,243,239,.16)); background: var(--jp-base, #111316); color: var(--jp-text, #F5F3EF);
}
.bka-follow__row { display: flex; flex-wrap: wrap; gap: 8px; }
.bka-follow__msg { margin: 0; font-size: 14px; line-height: 1.6; color: var(--jp-text-2, #B4B8BF); }
.bka-follow__msg:empty { display: none; }
.bka-follow__msg strong { color: var(--jp-text, #F5F3EF); }
.bka-follow__msg a { color: var(--jp-gold, #C9A24A); }
.bka-src { color: var(--jp-text-3, #878C95); }

/* ── the screen ─────────────────────────────────────────────────────────── */
.bka-page { max-width: 880px; margin: 0 auto; padding-block: 28px 64px; padding-inline: clamp(16px, 4vw, 32px); }
.bka-page h1 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 8px; letter-spacing: -.02em; }
.bka-lead { color: var(--jp-text-2, #B4B8BF); margin: 0 0 6px; line-height: 1.7; max-width: 66ch; }
.bka-privacy { color: var(--jp-text-3, #878C95); font-size: 13px; margin: 0 0 22px; line-height: 1.6; max-width: 66ch; }
.bka-state { color: var(--jp-text-2, #B4B8BF); }
.bka-news {
  border: 1px solid var(--jp-gold, #C9A24A); border-radius: var(--jp-r, 12px); padding: 14px 16px; margin: 0 0 18px;
  background: var(--sky-ice, rgba(201,162,74,.12));
}
.bka-news__t { font-size: 17px; margin: 0 0 8px; }
.bka-news ul, .bka-card__notes { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; line-height: 1.6; }
.bka-news time, .bka-card__notes time { color: var(--jp-text-3, #878C95); font-size: 13px; }
.bka-list { display: grid; gap: 14px; }
.bka-card {
  border: 1px solid var(--jp-line-soft, rgba(245,243,239,.085)); border-radius: var(--jp-r-lg, 18px);
  background: var(--jp-raised, #16181C); padding: 16px 18px; display: grid; gap: 10px;
}
.bka-card[data-status="PAUSED"], .bka-card[data-status="EXPIRED"] { opacity: .82; }
.bka-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bka-card__t { font-size: 18px; margin: 0; }
.bka-chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 1px solid currentColor; color: var(--jp-text-2, #B4B8BF); }
.bka-chip--active { color: var(--jp-gold, #C9A24A); }
.bka-card__dates, .bka-card__checked { margin: 0; color: var(--jp-text-2, #B4B8BF); font-size: 14px; }
.bka-card__checked { font-size: 13px; color: var(--jp-text-3, #878C95); }
.bka-comp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 10px 12px; border-radius: var(--jp-r, 12px); background: var(--jp-base, #111316);
}
.bka-comp__k { font-size: 13px; color: var(--jp-text-3, #878C95); grid-column: 1 / -1; }
.bka-comp__now { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bka-comp__meta, .bka-comp__prev, .bka-comp__warn, .bka-comp__none { font-size: 13px; color: var(--jp-text-2, #B4B8BF); grid-column: 1 / -1; line-height: 1.5; }
.bka-comp__warn { color: var(--jp-text-3, #878C95); }
.bka-comp__go { grid-column: 1 / -1; justify-self: start; color: var(--jp-gold, #C9A24A); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.bka-chg { font-variant-numeric: tabular-nums; }
.bka-chg.is-down { color: #7FD1A0; }
.bka-card__total { margin: 0; font-weight: 700; }
.bka-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bka-card__actions .bka-del { color: var(--jp-text-2, #B4B8BF); }
.bka-card__msg { margin: 0; font-size: 14px; color: var(--jp-text-2, #B4B8BF); }
.bka-card__msg:empty { display: none; }
.bka-empty { border: 1px dashed var(--jp-line, rgba(245,243,239,.16)); border-radius: var(--jp-r-lg, 18px); padding: 22px; color: var(--jp-text-2, #B4B8BF); }
.bka-empty p { margin: 0 0 10px; }
.bka-empty__links { display: flex; flex-wrap: wrap; gap: 10px; }
.bka-empty__links a { color: var(--jp-gold, #C9A24A); min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .bka-follow__btn, .bka-follow__ok, .bka-follow__cancel, .bka-card__actions button { transition: none; }
}

/* the shared truth badge (bk_truth.js) as it reads inside a meta line */
.bk-truth { font-weight: 600; }
.bk-truth--live { color: var(--jp-gold, #C9A24A); }
.bk-truth--unknown { color: var(--jp-text-3, #878C95); font-style: italic; }