/* ============================================================
   ui-anima-run-cnn.css — replay of ONE recorded UI-Anima run.
   Everything is scoped under .cnx-* (state classes too:
   .cnx-on / .cnx-act / .cnx-done / .cnx-busy / .cnx-ident / …).
   The window chrome, the floating panel and the readouts use
   site tokens (warm-light theme). The mock page INSIDE the
   window carries its own literal palette per skin — it is
   "someone else's website", so it goes white-news, then ivory
   broadsheet, while the site around it stays cream.
   Beats: type the prompt → identify (hairline boxes + element
   map) → design (streaming steps) → morph to the broadsheet,
   badge + telemetry. "Show original" holds the raw look back.
   Readability: no text below 12px anywhere in this file.
   ============================================================ */

.cnx-wrap { margin: var(--space-xl, 48px) auto 0; max-width: 1160px; }
.cnx-wrap figcaption { margin-top: 14px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: var(--color-muted, #6c6b61); }

.cnx-app {
  position: relative;
  border: 1px solid var(--color-border, #e0ddd1);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  background: var(--color-bg, #f5f4ef);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26, 26, 23, .14));
  font-family: var(--font-sans, sans-serif);
  color: var(--color-text, #1a1a17);
  --cnx-ok: var(--accent, #d9542b);
  --cnx-warn: #a87b1c;
  --cnx-good: var(--color-success, #22c55e);
  --cnx-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --cnx-uisans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---- titlebar ---------------------------------------------- */
.cnx-tb { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--color-surface, #eae7dd); border-bottom: 1px solid var(--color-border, #e0ddd1); min-width: 0; }
.cnx-dots { display: flex; gap: 6px; flex: none; }
.cnx-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.cnx-url { flex: 1; min-width: 0; max-width: 420px; margin: 0 auto; text-align: center; font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--color-muted, #6c6b61); border: 1px solid var(--color-border, #e0ddd1); background: var(--color-bg, #f5f4ef); border-radius: 999px; padding: 3px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx-tbstat { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--color-muted, #6c6b61); white-space: nowrap; }
.cnx-tbstat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border, #e0ddd1); transition: background-color .3s, box-shadow .3s; }
.cnx-app.cnx-working .cnx-tbstat::before { background: var(--cnx-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnx-ok) 20%, transparent); }
.cnx-app.cnx-landed .cnx-tbstat::before { background: var(--cnx-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnx-good) 22%, transparent); }

/* ---- stage (viewport) -------------------------------------- */
.cnx-stage { position: relative; height: 512px; overflow: hidden; background: #ffffff; }

/* ============================================================
   THE MOCK PAGE — shared DOM, two skins
   ============================================================ */
.cnx-page { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; transition: background-color .55s ease, opacity .22s ease, transform .22s ease; }
.cnx-page.cnx-veil { opacity: .22; transform: scale(.994); }

/* every element the engine wired — hairline box during identify */
.cnx-el { outline: 1px dashed transparent; outline-offset: 3px; transition: outline-color .45s ease; }
.cnx-app.cnx-ident .cnx-el { animation: cnx-box 3.4s ease both; animation-delay: calc(var(--i, 0) * 85ms); }
@keyframes cnx-box {
  0%   { outline-color: transparent; }
  7%   { outline-color: var(--cnx-ok); }
  26%  { outline-color: color-mix(in srgb, var(--cnx-ok) 42%, transparent); }
  100% { outline-color: color-mix(in srgb, var(--cnx-ok) 42%, transparent); }
}

/* ---- shared structural bones -------------------------------- */
.cnx-ad { display: flex; align-items: center; justify-content: space-between; flex: none; }
.cnx-date { display: none; }
.cnx-nav { display: flex; align-items: center; flex: none; min-width: 0; }
.cnx-mark { flex: none; }
.cnx-links { min-width: 0; }
.cnx-lk { display: inline; white-space: nowrap; }
.cnx-search { flex: none; white-space: nowrap; }
.cnx-acts { flex: none; display: flex; align-items: center; gap: 12px; }
.cnx-sub, .cnx-signin { white-space: nowrap; }
.cnx-tick { display: flex; align-items: center; gap: 9px; flex: none; min-width: 0; }
.cnx-tick-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx-grid { min-width: 0; }
.cnx-lead { min-width: 0; }
.cnx-cols { min-width: 0; }
.cnx-it { min-width: 0; }
.cnx-it-b { min-width: 0; flex: 1; display: block; }
.cnx-it-tag, .cnx-it-h, .cnx-it-a { display: block; }

/* ============================================================
   SKIN · cnn — the original look
   ============================================================ */
.cnx-skin-cnn { background: #ffffff; color: #0e0e0e; font-family: var(--cnx-uisans); padding: 0 22px 16px; }

.cnx-skin-cnn .cnx-ad { margin: 0 -22px; padding: 4px 22px; background: #f3f3f3; border-bottom: 1px solid #e7e7e7; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #98978f; }
.cnx-skin-cnn .cnx-ad-c { color: #b3b2ab; letter-spacing: .08em; }

.cnx-skin-cnn .cnx-nav { gap: 14px; padding: 8px 0 9px; border-bottom: 1px solid #e7e7e7; }
.cnx-skin-cnn .cnx-mark { background: #cc0000; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .04em; padding: 5px 8px; border-radius: 2px; }
.cnx-skin-cnn .cnx-links { display: flex; align-items: center; gap: 14px; overflow: hidden; }
.cnx-skin-cnn .cnx-lk { font-size: 13px; font-weight: 500; color: #14181c; }
.cnx-skin-cnn .cnx-search { margin-left: auto; font-size: 13px; color: #6b6b6b; }
.cnx-skin-cnn .cnx-sub { background: #cc0000; color: #fff; font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: 3px; }
.cnx-skin-cnn .cnx-signin { font-size: 13px; font-weight: 500; color: #14181c; }

.cnx-skin-cnn .cnx-tick { padding: 7px 0 8px; border-bottom: 1px solid #e7e7e7; }
.cnx-skin-cnn .cnx-tick-tag { flex: none; background: #cc0000; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 3px 7px; border-radius: 2px; }
.cnx-skin-cnn .cnx-tick-txt { font-size: 13.5px; font-weight: 600; color: #14181c; }

.cnx-skin-cnn .cnx-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0 26px; margin-top: 10px; }
.cnx-skin-cnn .cnx-photo { display: block; height: 156px; border-radius: 3px; background:
  radial-gradient(120% 90% at 28% 18%, rgba(255,255,255,.5), transparent 62%),
  linear-gradient(158deg, #b6c4ce 0%, #8ea4b2 46%, #6d8595 100%); }
.cnx-skin-cnn .cnx-lead-h { font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #0e0e0e; margin: 11px 0 5px; }
.cnx-skin-cnn .cnx-lead-d { font-size: 13.5px; line-height: 1.5; color: #4b4b4b; }
.cnx-skin-cnn .cnx-lead-a { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #97968f; margin-top: 7px; }

.cnx-skin-cnn .cnx-cols { display: flex; flex-direction: column; }
.cnx-skin-cnn .cnx-it { display: flex; gap: 11px; align-items: flex-start; padding: 6px 0; border-top: 1px solid #e7e7e7; }
.cnx-skin-cnn .cnx-it:first-child { border-top: none; padding-top: 0; }
/* the floating panel owns the bottom-right corner — the rail stops clear of it */
.cnx-skin-cnn .cnx-it:nth-child(n+5) { display: none; }
.cnx-skin-cnn .cnx-thumb { display: block; order: 2; flex: none; width: 58px; height: 42px; border-radius: 2px; background: linear-gradient(150deg, #c1cbd3, #92a5b1); }
/* CNN runs its LIVE / GALLERY / TRENDING tags inline with the headline */
.cnx-skin-cnn .cnx-it-tag { display: inline; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #cc0000; margin-right: 7px; }
.cnx-skin-cnn .cnx-it-h { display: inline; font-size: 13.5px; line-height: 1.32; font-weight: 600; color: #14181c; }
.cnx-skin-cnn .cnx-it-a { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #a3a29b; margin-top: 3px; }

/* ============================================================
   SKIN · bs — the delivered broadsheet
   ============================================================ */
.cnx-skin-bs { background: #f4efe2; color: #1e1a12; font-family: var(--cnx-serif); padding: 15px 26px 16px; }

.cnx-skin-bs .cnx-ad { display: none; }
.cnx-skin-bs .cnx-date { display: flex; align-items: baseline; justify-content: space-between; flex: none; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a7c58; padding-bottom: 7px; }

.cnx-skin-bs .cnx-nav { position: relative; flex-direction: column; align-items: stretch; padding: 0; border: none; }
.cnx-skin-bs .cnx-mark { background: none; color: #1e1a12; font-family: var(--cnx-serif); font-size: 34px; line-height: 1.06; font-weight: 700; letter-spacing: .005em; padding: 0; border-radius: 0; text-align: center; }
.cnx-skin-bs .cnx-links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 3px; text-align: center; border-top: 3px double #b0a077; border-bottom: 1px solid #cbbf9c; margin-top: 9px; padding: 7px 0; }
.cnx-skin-bs .cnx-lk { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: #6f6444; }
.cnx-skin-bs .cnx-lk.cnx-bsoff { display: none; }
.cnx-skin-bs .cnx-lk::after { content: "·"; margin: 0 8px; color: #b0a077; letter-spacing: 0; }
.cnx-skin-bs .cnx-lk:nth-child(5)::after { content: none; }
.cnx-skin-bs .cnx-search { position: absolute; left: 0; bottom: 8px; margin: 0; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #96895f; }
.cnx-skin-bs .cnx-acts { position: absolute; right: 0; bottom: 8px; gap: 10px; }
.cnx-skin-bs .cnx-sub { background: none; color: #96895f; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 0; border-radius: 0; }
.cnx-skin-bs .cnx-signin { color: #96895f; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* the single warm accent on the page */
.cnx-skin-bs .cnx-tick { justify-content: center; padding: 11px 0 0; border: none; }
.cnx-skin-bs .cnx-tick-tag { flex: none; background: none; color: #a33f1c; border: 1px solid #d0a288; border-radius: 2px; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px; }
.cnx-skin-bs .cnx-tick-txt { font-family: var(--cnx-serif); font-style: italic; font-size: 13px; font-weight: 400; color: #6a5f45; }

.cnx-skin-bs .cnx-grid { display: block; margin-top: 0; }
.cnx-skin-bs .cnx-lead { border-top: 1px solid #c9bd9a; margin-top: 10px; padding-top: 10px; text-align: center; }
.cnx-skin-bs .cnx-photo { display: none; }
.cnx-skin-bs .cnx-lead-h { font-family: var(--cnx-serif); font-size: 26px; line-height: 1.16; font-weight: 700; letter-spacing: 0; color: #1e1a12; margin: 0; max-width: 660px; margin-inline: auto; }
.cnx-skin-bs .cnx-lead-d { font-family: var(--cnx-serif); font-size: 13.5px; line-height: 1.55; color: #574c33; max-width: 610px; margin: 7px auto 0; }
.cnx-skin-bs .cnx-lead-a { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a7c58; margin-top: 8px; }

.cnx-skin-bs .cnx-cols { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 0; border-top: 1px solid #c9bd9a; margin-top: 11px; padding-top: 10px; }
.cnx-skin-bs .cnx-it { display: block; padding: 0 14px 11px 0; border: none; }
.cnx-skin-bs .cnx-it:nth-child(2n) { border-top: 1px solid #ddd2b0; padding-top: 10px; margin-top: 2px; }
.cnx-skin-bs .cnx-it:nth-child(n+3) { border-left: 1px solid #ddd2b0; padding-left: 14px; }
.cnx-skin-bs .cnx-thumb { display: none; }
.cnx-skin-bs .cnx-it-tag { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #96895f; margin-bottom: 4px; }
.cnx-skin-bs .cnx-it-h { font-family: var(--cnx-serif); font-size: 14.5px; line-height: 1.28; font-weight: 700; color: #1e1a12; }
.cnx-skin-bs .cnx-it-a { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9a8d68; margin-top: 5px; }

/* ---- morph-in stagger -------------------------------------- */
.cnx-page.cnx-enter .cnx-date,
.cnx-page.cnx-enter .cnx-nav,
.cnx-page.cnx-enter .cnx-tick,
.cnx-page.cnx-enter .cnx-lead,
.cnx-page.cnx-enter .cnx-cols { animation: cnx-rise .6s cubic-bezier(.22, .7, .25, 1) both; animation-delay: calc(var(--r, 0) * 75ms); }
@keyframes cnx-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

/* ---- identify sweep ---------------------------------------- */
.cnx-scan { position: absolute; left: 0; right: 0; top: -56px; height: 56px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cnx-ok) 12%, transparent) 55%, color-mix(in srgb, var(--cnx-ok) 26%, transparent) 97%, transparent);
  border-bottom: 1.5px solid var(--cnx-ok); }
.cnx-app.cnx-ident .cnx-scan { opacity: .9; animation: cnx-sweep 1.85s cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes cnx-sweep { from { top: -56px; } to { top: 100%; } }

/* ---- engine badge + show-original (window top-right) ------- */
.cnx-badge { flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 3px 4px 3px 11px; opacity: 0; transform: translateY(-5px); transition: opacity .4s, transform .4s; }
.cnx-badge.cnx-on { opacity: 1; transform: none; }
.cnx-badge-t { font: 500 12.5px/1 var(--font-mono, monospace); letter-spacing: .02em; color: var(--color-text, #1a1a17); white-space: nowrap; }
.cnx-n { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--cnx-ok); font-weight: 600; }
.cnx-orig { flex: none; visibility: hidden; display: inline-flex; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .02em; color: var(--color-muted, #6c6b61); background: var(--color-surface, #eae7dd); border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s, background-color .2s; }
.cnx-badge.cnx-done .cnx-orig { visibility: visible; }
.cnx-orig:hover { color: var(--cnx-ok); border-color: var(--cnx-ok); }
.cnx-orig:focus-visible { outline: 2px solid var(--cnx-ok); outline-offset: 2px; }
.cnx-orig.cnx-press { color: var(--color-bg, #f5f4ef); background: var(--cnx-ok); border-color: var(--cnx-ok); }

/* ---- element map readout (bottom band, left of the panel) --- */
.cnx-map { position: absolute; left: 14px; right: 470px; bottom: 13px; z-index: 6; background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(26, 26, 23, .12)); padding: 9px 13px 10px; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.cnx-map.cnx-on { opacity: 1; transform: none; }
.cnx-map-h { font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted, #6c6b61); margin-bottom: 8px; }
.cnx-map-rows { display: flex; flex-wrap: wrap; gap: 5px 15px; }
.cnx-map-r { display: inline-flex; align-items: baseline; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.cnx-map-r.cnx-on { opacity: 1; transform: none; }
.cnx-map-k { font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.4; color: var(--color-muted, #6c6b61); white-space: nowrap; }
.cnx-map-v { font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--cnx-ok); font-variant-numeric: tabular-nums; }
.cnx-map-r.cnx-soft .cnx-map-v { color: var(--cnx-warn); }
.cnx-map-r.cnx-tot { padding-right: 15px; border-right: 1px solid var(--color-border, #e0ddd1); }
.cnx-map-r.cnx-tot .cnx-map-k { color: var(--color-text, #1a1a17); }

/* ---- floating dock: panel + telemetry ---------------------- */
.cnx-dock { position: absolute; right: 14px; bottom: 13px; z-index: 8; width: 358px; max-width: calc(100% - 28px); display: flex; flex-direction: column; }
.cnx-panel { background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26, 26, 23, .14)); padding: 11px 12px; }

.cnx-p-row { display: flex; align-items: flex-start; gap: 10px; }
.cnx-p-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--color-text, #1a1a17); cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; border-radius: 4px; }
.cnx-p-text.cnx-ph { color: var(--color-muted, #6c6b61); -webkit-line-clamp: 2; line-clamp: 2; }
.cnx-p-text.cnx-clamp { -webkit-line-clamp: 2; line-clamp: 2; }
.cnx-p-text:hover { color: var(--cnx-ok); }
.cnx-p-text:focus-visible { outline: 2px solid var(--cnx-ok); outline-offset: 3px; }
.cnx-caret { display: inline-block; width: 6px; height: 13px; background: var(--cnx-ok); vertical-align: -2px; margin-left: 1px; animation: cnx-blink 1s steps(1) infinite; }
@keyframes cnx-blink { 50% { opacity: 0; } }
.cnx-send { flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--cnx-ok); color: var(--color-bg, #f5f4ef); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; transition: transform .2s, opacity .2s; }
.cnx-send.cnx-fire { animation: cnx-fire .5s cubic-bezier(.3, .7, .3, 1); }
@keyframes cnx-fire { 0% { transform: scale(1); } 45% { transform: scale(.84); } 100% { transform: scale(1); } }

.cnx-p-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.cnx-model { flex: none; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .02em; color: var(--color-muted, #6c6b61); border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 4px 10px; }
.cnx-replay { margin-left: auto; flex: none; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .02em; color: var(--color-muted, #6c6b61); background: none; border: none; padding: 2px 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cnx-replay:hover { color: var(--cnx-ok); }
.cnx-replay:focus-visible { outline: 2px solid var(--cnx-ok); outline-offset: 3px; border-radius: 3px; }

/* designing state — the panel switches wholly over to the work readout */
.cnx-work { display: none; }
.cnx-panel.cnx-busy .cnx-work { display: block; }
.cnx-panel.cnx-busy .cnx-p-row,
.cnx-panel.cnx-busy .cnx-p-meta { display: none; }
.cnx-work-h { font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--color-text, #1a1a17); }
.cnx-bar { position: relative; height: 4px; margin: 8px 0 9px; border-radius: 3px; background: var(--color-surface, #eae7dd); overflow: hidden; }
.cnx-bar-f { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--cnx-ok); transition: width .7s cubic-bezier(.4, 0, .2, 1); }
.cnx-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); transform: translateX(-100%); }
.cnx-panel.cnx-busy .cnx-bar::after { animation: cnx-shim 1.5s linear infinite; }
@keyframes cnx-shim { to { transform: translateX(100%); } }

.cnx-steps { height: 46px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15px); mask-image: linear-gradient(180deg, transparent 0, #000 15px); }
.cnx-step { position: relative; padding: 1px 0 1px 15px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.55; color: var(--color-muted, #6c6b61); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s, color .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx-step.cnx-on { opacity: 1; transform: none; }
.cnx-step::before { content: ""; position: absolute; left: 1px; top: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--color-border, #e0ddd1); transition: background-color .3s; }
.cnx-step.cnx-act { color: var(--color-text, #1a1a17); }
.cnx-step.cnx-act::before { background: var(--cnx-ok); animation: cnx-pulse 1.1s ease-in-out infinite; }
@keyframes cnx-pulse { 50% { opacity: .35; } }
.cnx-step.cnx-done::before { background: color-mix(in srgb, var(--cnx-good) 75%, #ffffff); }

/* telemetry line under the panel */
.cnx-tele { font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.4; letter-spacing: .01em; color: var(--color-muted, #6c6b61); text-align: right; padding-right: 3px; opacity: 0; max-height: 0; margin-top: 0; transform: translateY(4px); transition: opacity .4s, transform .4s, max-height .35s, margin-top .35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx-tele.cnx-on { opacity: 1; max-height: 24px; margin-top: 7px; transform: none; }
.cnx-tele b { font-weight: 600; color: var(--cnx-good); }

/* ---- show-original: dim the engine overlays ---------------- */
.cnx-app.cnx-orig-on .cnx-map { opacity: 0; }
.cnx-flag { position: absolute; left: 14px; bottom: 13px; z-index: 7; background: var(--color-text, #1a1a17); color: var(--color-bg, #f5f4ef); font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .02em; padding: 7px 12px; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.cnx-flag.cnx-on { opacity: 1; transform: none; }

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cnx-caret, .cnx-app.cnx-ident .cnx-scan, .cnx-app.cnx-ident .cnx-el,
  .cnx-panel.cnx-busy .cnx-bar::after, .cnx-step.cnx-act::before, .cnx-send.cnx-fire { animation: none; }
  .cnx-page.cnx-enter .cnx-date, .cnx-page.cnx-enter .cnx-nav, .cnx-page.cnx-enter .cnx-tick,
  .cnx-page.cnx-enter .cnx-lead, .cnx-page.cnx-enter .cnx-cols { animation: none; }
  .cnx-page, .cnx-el, .cnx-map, .cnx-map-r, .cnx-badge, .cnx-orig, .cnx-step,
  .cnx-tele, .cnx-bar-f, .cnx-send, .cnx-scan, .cnx-flag { transition: none; }
}

/* ============================================================
   responsive
   Above 1080px: the desktop composition — the page keeps its
   two-column grid and the floating dock owns the free
   bottom-right corner. Below that everything stacks and the
   page reserves a bottom band (padding-bottom) for the dock,
   so no headline is ever hidden behind it.
   ============================================================ */
/* the window narrows before the page does: columns get taller, so the
   stage grows to keep every headline clear of the floating dock */
@media (max-width: 1260px) and (min-width: 1081px) {
  .cnx-stage { height: 690px; }
  .cnx-url { max-width: 260px; }
}

@media (max-width: 1080px) {
  .cnx-stage { height: 780px; }
  .cnx-tb { gap: 8px; padding: 6px 9px; justify-content: center; }
  .cnx-dots, .cnx-url, .cnx-tbstat { display: none; }
  .cnx-badge { padding-left: 9px; gap: 6px; }
  .cnx-badge-t { font-size: 12px; }
  .cnx-orig { padding: 5px 9px; }
  .cnx-map { display: none; }
  .cnx-dock { right: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .cnx-tele { white-space: normal; }
  .cnx-tele.cnx-on { max-height: 44px; }
  .cnx-flag { left: 12px; bottom: 12px; }

  .cnx-skin-cnn { padding: 0 16px 190px; }
  .cnx-skin-cnn .cnx-ad { margin: 0 -16px; padding: 4px 16px; }
  .cnx-skin-cnn .cnx-links .cnx-lk:nth-child(n+5) { display: none; }
  .cnx-skin-cnn .cnx-search { display: none; }
  .cnx-skin-cnn .cnx-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 13px; }
  .cnx-skin-cnn .cnx-photo { height: 150px; }
  .cnx-skin-cnn .cnx-lead-h { font-size: 20px; }
  .cnx-skin-cnn .cnx-it:nth-child(n+4) { display: none; }

  .cnx-skin-bs { padding: 15px 18px 190px; }
  .cnx-skin-bs .cnx-mark { font-size: 30px; }
  .cnx-skin-bs .cnx-search { display: none; }
  .cnx-skin-bs .cnx-acts { position: static; justify-content: center; margin-top: 8px; }
  .cnx-skin-bs .cnx-lead-h { font-size: 22px; }
  .cnx-skin-bs .cnx-cols { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .cnx-skin-bs .cnx-it { padding-right: 0; }
  .cnx-skin-bs .cnx-it:nth-child(n+2) { border-top: 1px solid #ddd2b0; border-left: none; padding: 10px 0 11px; margin-top: 2px; }
  .cnx-skin-bs .cnx-it:nth-child(n+3) { display: none; }
}

@media (max-width: 560px) {
  .cnx-dock { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; }
  .cnx-flag { left: 10px; bottom: 10px; }

  .cnx-skin-cnn { padding: 0 14px 190px; }
  .cnx-skin-cnn .cnx-ad { margin: 0 -14px; padding: 4px 14px; }
  .cnx-skin-cnn .cnx-ad-c { display: none; }
  .cnx-skin-cnn .cnx-links .cnx-lk:nth-child(n+3) { display: none; }
  .cnx-skin-cnn .cnx-photo { height: 120px; }
  .cnx-skin-cnn .cnx-lead-h { font-size: 19px; }
  .cnx-skin-cnn .cnx-it:nth-child(n+3) { display: none; }

  .cnx-skin-bs { padding: 15px 16px 190px; }
  .cnx-skin-bs .cnx-date-l, .cnx-skin-bs .cnx-date-r { display: none; }
  .cnx-skin-bs .cnx-date { justify-content: center; }
  .cnx-skin-bs .cnx-mark { font-size: 26px; }
  .cnx-skin-bs .cnx-lead-h { font-size: 21px; }
}