/* ============================================================
   THE TEN BLUE LINKS — blue-hour layer.
   Cold steel blue, no glow, no neon: opaque panels, a thin light
   edge on top, tabular "form" rows in mono. A slow blue haze
   instead of fog; nothing falls, nothing flashes.
   ============================================================ */

.bluehour-page {
  --blue: #7FA6E8;
  --blue-soft: #B9CFF3;
  --blue-deep: #1B2A4A;
  --blue-panel: #10162A;
  --blue-line: rgba(127, 166, 232, 0.22);
}

.bluehour-page .article-tag {
  color: var(--blue-soft);
  border-color: var(--blue-line);
  background: rgba(127, 166, 232, 0.08);
  box-shadow: none;
}
.bluehour-page .article-head h1 em {
  font-style: italic; color: var(--blue-soft);
  background: none; -webkit-text-fill-color: currentColor; text-shadow: none; filter: none;
}
.bluehour-page .beam-halo { background: linear-gradient(90deg, transparent 10%, rgba(127, 166, 232, 0.09) 50%, transparent 90%); }
.bluehour-page .fog-a { background: radial-gradient(closest-side, rgba(70, 110, 200, 0.14), transparent 70%); }
.bluehour-page .fog-b { background: radial-gradient(closest-side, rgba(40, 70, 140, 0.16), transparent 70%); }

/* the quiet form-stamp under the byline */
.form-stamp {
  display: inline-block; margin-top: 18px; padding: 6px 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--blue); border: 1px solid var(--blue-line); border-radius: 4px;
}

/* ---------- prose ---------- */

.bluehour-page .article-body a:not(.btn) {
  color: var(--blue-soft); border-bottom: 1px solid var(--blue-line); text-decoration: none; text-shadow: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bluehour-page .article-body a:not(.btn):hover { color: #fff; border-bottom-color: var(--blue); text-shadow: none; }
.bluehour-page .sources a { color: var(--blue-soft); }
.bluehour-page .article-body h2 { font-weight: 800; letter-spacing: -0.03em; }
.bluehour-page .article-body h2 .h-no {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; color: var(--blue);
}
.bluehour-page .lead-para { font-size: 20.5px; }
.bluehour-page .pull {
  border-left-color: var(--blue);
  background: linear-gradient(100deg, rgba(127, 166, 232, 0.08), transparent 70%);
}
.bluehour-page .check-list li::before { content: "—"; color: var(--blue); font-weight: 400; }
.bluehour-page .warn-box { border-color: rgba(127, 166, 232, 0.28); background: rgba(127, 166, 232, 0.05); }
.bluehour-page .warn-label { color: var(--blue); }
.bluehour-page .cta-card { border-color: var(--blue-line); background: linear-gradient(160deg, rgba(127, 166, 232, 0.08), var(--panel) 65%); }

/* ---------- data blocks ---------- */

.fig {
  position: relative; margin: 34px 0 36px; padding: 26px 28px 22px;
  border: 1px solid var(--blue-line); border-top-color: rgba(185, 207, 243, 0.4); border-radius: 14px;
  background: var(--blue-panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.fig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fig-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--blue-soft); }
.fig-src { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-faint); }
.fig-src a { color: var(--text-dim) !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; }
.fig-src a:hover { color: var(--blue-soft) !important; }
.fig-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--blue-line); font-size: 14px; color: var(--text-dim); }

/* certificate: label / value rows */
.cert { border: 1px solid var(--blue-line); border-radius: 8px; overflow: hidden; }
.cert-row { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid var(--blue-line); }
.cert-row:last-child { border-bottom: 0; }
.cert-row dt {
  padding: 14px 16px; background: rgba(127, 166, 232, 0.06); border-right: 1px solid var(--blue-line);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--blue);
}
.cert-row dd { margin: 0; padding: 14px 18px; font-size: 15px; color: var(--text); line-height: 1.5; }
.cert-row dd b { color: var(--blue-soft); font-weight: 600; }
.cert-row dd small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-faint); }

.gap-fig { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gap-card { border: 1px solid var(--blue-line); border-radius: 12px; padding: 24px 22px; background: rgba(0, 0, 0, 0.25); text-align: center; }
.gap-card b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(38px, 7vw, 60px); letter-spacing: -0.045em; line-height: 1; color: var(--blue-soft); margin-bottom: 10px; }
.gap-card.is-lost b { color: #8394B8; }
.gap-card p { font-size: 14.5px; color: var(--text-dim); }
.gap-card .g-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-faint); margin-bottom: 14px; }

/* three-letter glossary */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trio-cell { border: 1px solid var(--blue-line); border-radius: 12px; padding: 20px 20px 18px; background: rgba(0, 0, 0, 0.25); }
.trio-cell h4 { font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--blue-soft); margin-bottom: 4px; }
.trio-cell .t-k { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-bottom: 12px; }
.trio-cell p { font-size: 14.5px; color: var(--text-dim); margin-bottom: 10px; }
.trio-cell .t-goal { color: var(--text); }
.trio-cell .t-goal b { color: var(--blue); font-weight: 600; }

/* ---------- adaptive ---------- */

@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fig { padding: 20px 16px 18px; margin: 26px 0 28px; }
  .gap-fig { grid-template-columns: 1fr; }
  .cert-row { grid-template-columns: 1fr; }
  .cert-row dt { border-right: 0; border-bottom: 1px solid var(--blue-line); padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .bluehour-page .article-body a:not(.btn) { transition: none; } }

/* ---------- code / config block ---------- */
.payload {
  margin: 22px 0 26px; padding: 18px 20px; overflow-x: auto; white-space: pre;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; color: var(--text-dim);
  background: #0A0D18; border: 1px solid var(--blue-line); border-radius: 10px;
}
.payload .k { color: var(--blue-soft); }
.payload .c { color: var(--text-faint); }
.payload .hot { color: #fff; font-weight: 600; }
.cert-row dt code { color: var(--blue-soft); background: none; font-size: 12px; }