/* ============================================================
   FIND: AI. REPLACE WITH: SI. — the diff layer.
   The article is a find-and-replace run over one week of news, so
   the visual language is a diff: removed words struck through in
   --pain, added words in --ok. Those two tokens live inside diff
   rows only; everything else is the brand accent. Opaque panels,
   a thin light edge on top, shadow instead of glow. Nothing flashes.
   ============================================================ */

.fr-page {
  --fr-line: rgba(228, 135, 154, 0.24);
  --fr-rm-bg: rgba(248, 113, 113, 0.09);
  --fr-add-bg: rgba(110, 231, 160, 0.09);
  --fr-ink: var(--bg-deep);
}

/* ---------- head ---------- */

.fr-page .article-tag { font-size: 11px; letter-spacing: 0.1em; }
.fr-page .article-byline { font-size: 11px; letter-spacing: 0.08em; }
.fr-page .article-head h1 {
  font-size: clamp(38px, 6.4vw, 76px); line-height: 1; letter-spacing: -0.045em;
}
.fr-page .article-head h1 em {
  text-shadow: none; background: none; -webkit-text-fill-color: currentColor; filter: none;
}
/* the old word: dimmed, and a line is drawn through it once on load */
.fr-page .article-head h1 em.fr-old {
  position: relative; display: inline-block; color: var(--text-faint);
}
.fr-page .article-head h1 em.fr-old::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: 0.06em;
  background: var(--pain); transform-origin: left center; transform: scaleX(0);
  animation: fr-strike 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
@keyframes fr-strike { to { transform: scaleX(1); } }

.fr-page .beam-halo { background: linear-gradient(90deg, transparent 10%, rgba(228, 135, 154, 0.07) 50%, transparent 90%); }

/* the dialog under the byline */
.fr-dialog {
  max-width: 560px; margin: 30px auto 0; text-align: left;
  border: 1px solid var(--line-mid); border-top-color: var(--line-bright); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-2), var(--edge-top); overflow: hidden;
}
.fr-bar {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.fr-bar span:last-child { color: var(--text-faint); }
.fr-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; padding: 14px 16px 0; }
.fr-lab { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.fr-field {
  display: flex; align-items: center; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line-mid); border-radius: 8px; background: var(--fr-ink);
  font-family: var(--font-mono); font-size: 15px; color: var(--text);
}
.fr-find .fr-text { color: var(--pain); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fr-with { position: relative; color: var(--ok); }
.fr-cycle { display: inline-grid; }
.fr-cycle > span { grid-area: 1 / 1; opacity: 0; animation: fr-cycle 9s infinite; }
.fr-cycle > span:nth-child(1) { opacity: 1; animation-delay: 0s; }
.fr-cycle > span:nth-child(2) { animation-delay: 3s; }
.fr-cycle > span:nth-child(3) { animation-delay: 6s; }
@keyframes fr-cycle {
  0%   { opacity: 0; transform: translateY(6px); }
  4%   { opacity: 1; transform: translateY(0); }
  29%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}
.fr-caret { width: 2px; height: 1.2em; margin-left: 3px; background: var(--ok); animation: fr-blink 1.1s steps(1) infinite; }
@keyframes fr-blink { 50% { opacity: 0; } }
.fr-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px 16px; font-size: 13px; color: var(--text-dim);
}
.fr-btn {
  padding: 7px 14px; border-radius: 8px; background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
}

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

.fr-page .lead-para { font-size: 20.5px; }
.fr-page .article-body a:not(.btn) {
  border-bottom-color: var(--fr-line); text-shadow: none;
}
.fr-page .article-body a:not(.btn):hover { color: var(--accent-hot); border-bottom-color: var(--accent); text-shadow: none; }
.fr-page .article-body h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; }
.fr-page .article-body h2 .h-no {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: var(--accent);
}
.fr-page .pull {
  border-left-color: var(--accent);
  background: linear-gradient(100deg, rgba(168, 58, 85, 0.1), transparent 70%);
}
.fr-page .check-list li::before { content: "—"; color: var(--accent); font-weight: 400; }
.fr-page .sources { font-size: 11px; letter-spacing: 0.04em; line-height: 2.1; }
.fr-page .next-card .n-k { font-size: 10.5px; letter-spacing: 0.08em; }
.fr-page .next-up-k { font-size: 11px; letter-spacing: 0.1em; }
.fr-page .cta-card { box-shadow: var(--shadow-2), var(--edge-top); }

/* inline find / replace tokens, used inside headings and prose */
.fr-rm, .fr-add {
  display: inline; padding: 0.02em 0.22em; border-radius: 0.2em;
  font-family: var(--font-mono); font-size: 0.74em; font-weight: 500; letter-spacing: -0.02em;
  white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.fr-rm  { color: var(--pain); background: var(--fr-rm-bg); text-decoration: line-through; text-decoration-thickness: 0.09em; }
.fr-add { color: var(--ok);   background: var(--fr-add-bg); }

/* ---------- the fever: commentary, clearly not news ---------- */

.fr-fever {
  position: relative; margin: 34px 0 38px; padding: 4px 0 4px 26px;
  border-left: 2px dashed var(--accent);
}
.fr-fever-k {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent);
}
.fr-fever p {
  margin: 0 0 12px; font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.7vw, 27px); line-height: 1.32; letter-spacing: -0.005em; color: var(--text);
}
.fr-fever p:last-child { margin-bottom: 0; }
.fr-fever s { color: var(--text-faint); text-decoration-color: var(--pain); text-decoration-thickness: 1.5px; }
.fr-fever .fr-loop { display: block; color: var(--text-dim); }
.fr-fever .fr-loop:nth-of-type(2) { opacity: 0.72; }
.fr-fever .fr-loop:nth-of-type(3) { opacity: 0.5; }
.fr-fever .fr-loop:nth-of-type(4) { opacity: 0.32; }

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

.fr-page .fig {
  position: relative; margin: 34px 0 36px; padding: 24px 26px 20px;
  border: 1px solid var(--line-mid); border-top-color: var(--line-bright); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-1), var(--edge-top);
}
.fig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fig-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--text); }
.fig-src { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--text-faint); line-height: 1.6; }
.fr-page .fig-src a { color: var(--text-dim); border-bottom-color: rgba(255, 255, 255, 0.2); }
.fr-page .fig-src a:hover { color: var(--accent); }
.fig-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

/* the diff itself */
.diff { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; }
.diff-row { display: grid; grid-template-columns: 34px 1fr; align-items: start; border-bottom: 1px solid var(--line); }
.diff-row:last-child { border-bottom: 0; }
.diff-row .dm { padding: 10px 0; text-align: center; font-weight: 700; user-select: none; }
.diff-row .dt { padding: 10px 14px 10px 0; color: var(--text); overflow-wrap: anywhere; }
.diff-row.rm  { background: var(--fr-rm-bg); }
.diff-row.rm .dm { color: var(--pain); }
.diff-row.rm .dt { color: var(--text-dim); }
.diff-row.rm .dt s { text-decoration-color: var(--pain); text-decoration-thickness: 1.5px; }
.diff-row.add { background: var(--fr-add-bg); }
.diff-row.add .dm { color: var(--ok); }
.diff-row.ctx .dm { color: var(--text-faint); }
.diff-row.ctx .dt { color: var(--text-faint); }
.diff-row .dt small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-faint); }

/* label / value rows */
.cert { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cert-row { display: grid; grid-template-columns: 172px 1fr; border-bottom: 1px solid var(--line); }
.cert-row:last-child { border-bottom: 0; }
.cert-row dt {
  padding: 13px 16px; background: rgba(168, 58, 85, 0.08); border-right: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--accent);
}
.cert-row dd { margin: 0; padding: 13px 18px; font-size: 15px; line-height: 1.5; color: var(--text); }
.cert-row dd b { color: var(--text); font-weight: 600; }
.cert-row dd .dim { color: var(--text-dim); }
.cert-row dd .rm { color: var(--pain); }
.cert-row dd .ok { color: var(--ok); }

/* big numbers */
.stat-fig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-fig.two { grid-template-columns: 1fr 1fr; }
.stat-card { border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px 18px; background: var(--fr-ink); text-align: center; }
.stat-card b {
  display: block; margin-bottom: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 6vw, 54px); letter-spacing: -0.045em; line-height: 1; color: var(--accent);
}
.stat-card .s-k { margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.03em; }
.stat-card p { font-size: 14px; line-height: 1.45; color: var(--text-dim); margin: 0; }
.stat-card.is-rm b { color: var(--text-faint); }

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

@media (max-width: 860px) { .stat-fig { grid-template-columns: 1fr; } .stat-fig.two { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fr-page .fig { padding: 18px 14px 16px; margin: 26px 0 28px; }
  .cert-row { grid-template-columns: 1fr; }
  .cert-row dt { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; }
  .fr-row { grid-template-columns: 1fr; gap: 6px; }
  .fr-fever { padding-left: 18px; }
  .diff { font-size: 12.5px; }
  .fr-page .article-head h1 { font-size: clamp(36px, 11vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .fr-page .article-head h1 em.fr-old::after { animation: none; transform: scaleX(1); }
  .fr-cycle > span { animation: none; }
  .fr-cycle > span:nth-child(n+2) { display: none; }
  .fr-caret { animation: none; }
}