/* ==========================================================================
   Live alerts box (views/partials/live-alerts-box.php) and the home page live
   line (views/partials/live-alerts-line.php). The one shared style for each:
   linked once per page by live-alerts-box-assets.php, and the only place their
   look lives (no page-local styles, no inline styles). The box script
   (live-alerts-box.js) only adds and removes the classes defined here.

   Colours come from the site theme tokens; each token carries the Defcon theme
   value as its fallback, so the box stands alone on a site without them. The
   rows' edge colours are RapidCardLevel::rowStyles() (shared with the Alert
   Flash lists), not this file.

   Sizes: the Defcon site's reset gives every a and button min-height 44px
   (base/reset.css). Inline links ignore that; links and buttons laid out as
   flex items or inline-blocks here set their own height, never below the 24px
   target floor.
   ========================================================================== */

.livebox,
.liveline {
  --lb-bg: var(--bg-card, #151520);
  --lb-bg-raised: var(--bg-elevated, #1e1e2a);
  --lb-on-accent: var(--bg-primary, #0a0a0f);
  --lb-text: var(--text-primary, #e5e5e7);
  --lb-text-2: var(--text-secondary, #a1a1aa);
  --lb-muted: var(--text-muted, #b0b8c4);
  --lb-accent: var(--accent-primary, #0ea5e9);
  --lb-accent-hover: var(--accent-hover, #00b8e0);
  --lb-border: var(--border-subtle, rgba(255, 255, 255, 0.08));
  /* Edges of chips and buttons: 3:1 against the card, the non-text contrast floor. */
  --lb-edge: rgba(255, 255, 255, 0.35);
  /* The LIVE badge; white text on it passes 4.5:1 at its small size. */
  --lb-live: #dc2626;
  --lb-new: rgba(255, 209, 102, 0.35);
  --lb-radius: 12px;
  --lb-radius-sm: 6px;
  box-sizing: border-box;
  max-width: 100%;
  color: var(--lb-text);
}

/* --------------------------------------------------------------------------
   Box card and header
   -------------------------------------------------------------------------- */

.livebox {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border-left: 4px solid var(--lb-accent);
  border-radius: var(--lb-radius);
  background: var(--lb-bg);
}

.livebox__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0 0 0.75rem;
}

.livebox__heading {
  margin: 0;
  color: var(--lb-text);
  font-size: 1.25rem;
  line-height: 1.3;
}

.livebox__live,
.liveline__badge--live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: var(--lb-live);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.livebox__live-dot,
.liveline__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #fff;
}

.livebox__live--on .livebox__live-dot,
.liveline__badge--live .liveline__dot {
  animation: livebox-pulse 2.4s ease-in-out infinite;
}

.livebox__updated {
  color: var(--lb-muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Buttons: Pause, filter pills, show more, fold; waiting rows; summary
   -------------------------------------------------------------------------- */

.livebox__pause,
.livebox__pill,
.livebox__more,
.livebox__fold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--lb-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--lb-text-2);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
}

.livebox__pause:hover,
.livebox__pill:hover,
.livebox__more:hover,
.livebox__fold-btn:hover {
  border-color: var(--lb-text-2);
  color: var(--lb-text);
}

.livebox__pause[aria-pressed="true"],
.livebox__pill[aria-pressed="true"] {
  border-color: var(--lb-accent);
  background: var(--lb-accent);
  color: var(--lb-on-accent);
  font-weight: 600;
}

.livebox__pause {
  margin-left: auto;
  min-height: 2rem;
  font-size: 0.8125rem;
}

.livebox__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.livebox__more {
  margin-top: 0.75rem;
}

.livebox__fold {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--lb-border);
}

.livebox__fold-btn {
  min-height: 1.75rem;
  padding: 0.15rem 0.7rem;
  font-size: 0.8125rem;
}

.livebox__waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.25rem;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--lb-accent);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-bg-raised);
  color: var(--lb-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.livebox__peek {
  min-height: 1.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--lb-edge);
  border-radius: var(--lb-radius-sm);
  background: transparent;
  color: var(--lb-text-2);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.livebox__peek:hover,
.livebox__peek[aria-expanded="true"] {
  border-color: var(--lb-accent);
  color: var(--lb-text);
}

/* --------------------------------------------------------------------------
   Count line, "new since your last visit", quiet line
   -------------------------------------------------------------------------- */

.livebox__count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0 0 0.6rem;
  color: var(--lb-text-2);
  font-size: 0.875rem;
}

.livebox__showall {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lb-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.livebox__showall:hover {
  color: var(--lb-accent-hover);
}

.livebox__new-since {
  margin: 0 0 0.5rem;
  color: var(--lb-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.livebox__quiet {
  margin: 0 0 0.75rem;
  color: var(--lb-text-2);
  font-size: 0.9375rem;
}

.livebox__quiet-link {
  color: var(--lb-accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Rows (views/partials/rapid-preview-row.php)
   -------------------------------------------------------------------------- */

.livebox__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.livebox__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--lb-border);
}

.livebox__row:last-child {
  border-bottom: 0;
}

.livebox__time {
  flex-shrink: 0;
  color: var(--lb-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.livebox__cat {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--lb-edge);
  border-radius: 999px;
  color: var(--lb-text-2);
  font-size: 0.75rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.livebox__cat:hover {
  border-color: var(--lb-text-2);
  color: var(--lb-text);
}

/* The title takes the rest of the line, and a line of its own on a narrow screen. */
.livebox__title {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 0;
  color: var(--lb-accent);
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.livebox__title:hover {
  color: var(--lb-accent-hover);
  text-decoration: underline;
}

.livebox__summary {
  flex-basis: 100%;
  margin: 0.25rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--lb-radius-sm);
  background: var(--lb-bg-raised);
}

.livebox__summary-text {
  margin: 0 0 0.4rem;
  color: var(--lb-text-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.livebox__read {
  color: var(--lb-accent);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Row states the box script sets. Two classes, so source order never matters. */
.livebox__row.livebox__row--extra,
.livebox__row.livebox__row--folded {
  display: none;
}

.livebox__row.livebox__row--new {
  animation: livebox-new 1.6s ease-out;
}

.livebox__row.livebox__row--first-seen {
  border-top: 2px solid var(--lb-accent);
}

/* --------------------------------------------------------------------------
   Pinned written alerts (top of the /current-level panel)
   -------------------------------------------------------------------------- */

.livebox__pinned {
  margin: 0 0 1rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--lb-border);
}

.livebox__pinned-title {
  margin: 0 0 0.25rem;
  color: var(--lb-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.livebox__pinned-link {
  display: inline-block;
  min-height: 0;
  margin-top: 0.4rem;
  color: var(--lb-accent);
  font-size: 0.875rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Category chips and the link under the box
   -------------------------------------------------------------------------- */

.livebox__chips {
  margin: 1rem 0 0;
}

.livebox__chips-label {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--lb-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.livebox__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.livebox__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--lb-edge);
  border-radius: 999px;
  color: var(--lb-text-2);
  font-size: 0.8125rem;
  text-decoration: none;
}

.livebox__chip:hover {
  border-color: var(--lb-accent);
  color: var(--lb-text);
}

.livebox__chip-n {
  color: var(--lb-text);
  font-weight: 600;
}

.livebox__footer {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
}

.livebox__footer-link {
  color: var(--lb-accent);
  font-weight: 600;
}

.livebox__footer-link:hover {
  color: var(--lb-accent-hover);
}

/* --------------------------------------------------------------------------
   Home page live line
   -------------------------------------------------------------------------- */

.liveline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--lb-accent);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-bg);
  font-size: 0.9375rem;
}

.liveline__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--lb-edge);
  border-radius: 3px;
  color: var(--lb-text-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.liveline__badge.liveline__badge--live {
  border-color: var(--lb-live);
  color: #fff;
}

.liveline__dot {
  display: none;
}

.liveline__badge--live .liveline__dot {
  display: inline-block;
}

.liveline__title {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 0;
  color: var(--lb-text);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.liveline__title:hover {
  color: var(--lb-accent-hover);
  text-decoration: underline;
}

.liveline__time {
  color: var(--lb-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.liveline__all {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--lb-accent);
  font-size: 0.875rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Shared: focus ring, screen-reader text, hidden parts, motion
   -------------------------------------------------------------------------- */

.livebox a:focus-visible,
.livebox button:focus-visible,
.liveline a:focus-visible {
  outline: 2px solid var(--lb-accent);
  outline-offset: 2px;
}

.livebox__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The hidden attribute wins over the display the classes above set. */
.livebox [hidden],
.liveline [hidden] {
  display: none;
}

@keyframes livebox-new {
  from { background-color: var(--lb-new); }
  to { background-color: transparent; }
}

@keyframes livebox-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (max-width: 480px) {
  .livebox {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .livebox__row.livebox__row--new,
  .livebox__live--on .livebox__live-dot,
  .liveline__badge--live .liveline__dot {
    animation: none;
  }
}