/*
  Automation lane — page-specific demo styles.
  Loaded after /main_style.css and /portfolio/portfolio.css.

  Contains: .dp-* (workflow runner), .scr-* (crawl simulator),
  .cron-* (schedule builder). Shared bits live at the bottom:
  responsive + one consolidated reduced-motion block.
*/

/* ===================== Shared demo-control affordances ===================== */

.demo-pipe :focus-visible,
.scr :focus-visible,
.cron :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 80%, #fff);
  outline-offset: 2px;
  border-radius: 8px;
}

.demo-pipe .dim,
.scr .dim,
.cron .dim { color: var(--muted); font-weight: 600; }

/* Icon/label optical alignment now lives in the shared portfolio.css so every
   lane boxes glyphs to the same width. The local copy that used to sit here
   was lifted there verbatim. */


/* ---- Micro-badge rhythm ----
   This page had six pill-shaped badges with six different vertical paddings
   (0.1 / 0.12 / 0.15 / 0.24rem), so near-identical labels rendered anywhere
   from 15.6px to 22.4px tall — .scr-dedupe in particular was a squeezed
   capsule sitting beside a 28px search field. One scale for all of them,
   matched to the best-proportioned of the set (.dp-badge). */
.dp-insp-badge,
.dp-h-badge,
.dp-h-dry,
.cron-custom,
.scr-dedupe {
  padding: var(--badge-pad);
  line-height: var(--badge-lh);
}

/* ===================== DEMO 1: auto-pipeline ===================== */

.demo-pipe { padding: 1.1rem 1.1rem 1.2rem; }

/* --- header strip --- */
.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dp-id {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800; font-size: 0.95rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.dp-id i { color: color-mix(in srgb, var(--accent) 82%, #fff); }
.dp-sim {
  font-family: system-ui, sans-serif;
  font-size: 0.6rem; font-weight: 750; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.dp-badges { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.dp-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 0.7rem; font-weight: 700;
  font-family: ui-monospace, Consolas, monospace;
  white-space: nowrap;
  cursor: help;
}
.dp-badge i { font-size: 0.66rem; }
.dp-badge.mode {
  color: color-mix(in srgb, var(--accent) 85%, #fff);
  border-color: color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.03));
}
.dp-badge.mode.dry {
  color: #9fdcff;
  border-color: rgba(159,220,255,0.4);
  background: rgba(159,220,255,0.1);
}

/* --- graph --- */
.dp-graph-scroll { overflow-x: auto; overflow-y: hidden; min-width: 0; padding-bottom: 0.2rem; }

/* The DAG is laid out as an intrinsic grid: 5 step columns interleaved with 4
   edge columns. `width: max-content` + `min-width: 100%` is the important part —
   a centred flex row would overflow EQUALLY on both sides inside the scroller,
   and scrollLeft cannot go negative, so the first node became unreachable on
   phones. This way the grid centres while it fits and scrolls from its true
   left edge once it does not. */
.dp-graph {
  display: grid;
  grid-template-columns: repeat(9, max-content);
  align-items: center;
  justify-content: center;
  column-gap: 0.25rem;
  width: max-content;
  min-width: 100%;
  padding: 0.2rem 0 0.1rem;
}
.dp-row { display: contents; }

.dp-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  min-width: 96px;
  padding: 0.7rem 0.6rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease, transform 180ms ease;
}
.dp-node:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.16)); }
.dp-node i { font-size: 1.05rem; color: var(--muted); transition: color 240ms ease; }
.dp-n-name { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; }
.dp-n-meta {
  font-size: 0.63rem; font-weight: 650; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
  white-space: nowrap;
}

.dp-node.sel {
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.05));
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.14));
}
.dp-node.sel::after {
  content: "";
  position: absolute; left: 50%; bottom: -7px;
  width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.14));
}

.dp-light {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  transition: background 240ms ease, box-shadow 240ms ease;
}

.dp-node.running { border-color: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,0.14)); box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 20%, transparent); }
.dp-node.running i { color: color-mix(in srgb, var(--accent) 85%, #fff); }
.dp-node.running .dp-light { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: dpBlink 0.6s ease-in-out infinite; }

.dp-node.done { border-color: rgba(70, 230, 168, 0.4); }
.dp-node.done i { color: #46e6a8; }
.dp-node.done .dp-light { background: #46e6a8; box-shadow: 0 0 8px rgba(70,230,168,0.7); }

.dp-node.warn { border-color: rgba(255, 209, 125, 0.45); }
.dp-node.warn i { color: #ffd17d; }
.dp-node.warn .dp-light { background: #ffd17d; box-shadow: 0 0 8px rgba(255,209,125,0.7); }

.dp-node.error { border-color: rgba(255, 95, 107, 0.55); box-shadow: 0 0 26px rgba(255, 95, 107, 0.18); }
.dp-node.error i { color: #ff5f6b; }
.dp-node.error .dp-light { background: #ff5f6b; box-shadow: 0 0 10px rgba(255,95,107,0.8); animation: dpBlink 0.35s ease-in-out infinite; }

.dp-node.skipped { opacity: 0.42; }
.dp-node.skipped .dp-light { background: rgba(255,255,255,0.2); }

@keyframes dpBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.dp-edge {
  position: relative;
  align-self: center;
  width: 40px; height: 2px;
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  flex: 0 0 auto;
}
.dp-edge.live { background: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.14)); }
.dp-packet {
  position: absolute; top: 50%; left: 0;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transform: translate(-50%, -50%) scale(0);
}
.dp-edge.sending .dp-packet { animation: dpTravel 0.55s linear forwards; }
@keyframes dpTravel {
  0%   { transform: translate(-50%, -50%) scale(1); left: 0; }
  100% { transform: translate(-50%, -50%) scale(1); left: 100%; }
}

/* conditional branch */
/* Row 2, starting at the Validate column (col 5) so the elbow drops out of the
   step it actually branches from — no magic percentage offsets. */
.dp-branch-row {
  grid-row: 2;
  grid-column: 5 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0 0 2.4rem;
}
.dp-elbow {
  width: 26px; height: 26px;
  border-left: 2px dashed rgba(255,255,255,0.22);
  border-bottom: 2px dashed rgba(255,255,255,0.22);
  border-bottom-left-radius: 10px;
  margin-top: -22px;
  flex: 0 0 auto;
}
.dp-cond {
  font-size: 0.66rem; font-weight: 700;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
  font-family: ui-monospace, Consolas, monospace;
  white-space: nowrap;
}
.dp-node.alt { min-width: 104px; border-style: dashed; }

/* --- controls --- */
.dp-controls {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.5rem;
  margin: 1rem 0;
}
.dp-fail { border-color: rgba(255, 209, 125, 0.35); }
.demo-pipe .mini-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.dp-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0 0.6rem; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.dp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dp-switch {
  width: 34px; height: 19px; border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.16);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
  flex: 0 0 auto;
}
.dp-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 999px;
  background: #fff; opacity: 0.75;
  transition: transform 200ms ease, opacity 200ms ease;
}
.dp-toggle input:checked + .dp-switch { background: color-mix(in srgb, var(--accent) 70%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.dp-toggle input:checked + .dp-switch::after { transform: translateX(15px); opacity: 1; }
.dp-toggle input:focus-visible + .dp-switch { outline: 2px solid color-mix(in srgb, var(--accent) 80%, #fff); outline-offset: 2px; }

/* --- panes --- */
.dp-panes { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
@media (min-width: 880px) { .dp-panes { grid-template-columns: 1.25fr 1fr; } }

.dp-pane {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  min-width: 0;
}
.dp-pane-wide { margin-top: 0.7rem; }
/* min-height so all three pane bars are the same height whatever they carry.
   Measured before: 39.4px (log — holds 24px filter chips), 36.2px (inspector —
   holds a badge), 30.4px (history — plain text). The first two sit SIDE BY SIDE
   in .dp-panes, so their header rules and the panel bodies under them were
   3.2px out of line. */
.dp-pane-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  background: rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dp-pane-title {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.dp-pane-title i { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }

.dp-filters { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.dp-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  height: 24px; padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font: inherit; font-size: 0.68rem; font-weight: 750;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.dp-chip b { font-variant-numeric: tabular-nums; opacity: 0.75; }
.dp-chip:hover { color: var(--text); }
.dp-chip.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.04)); border-color: color-mix(in srgb, var(--accent) 50%, rgba(255,255,255,0.14)); }
.dp-chip.warn.on { background: rgba(255,209,125,0.16); border-color: rgba(255,209,125,0.5); }
.dp-chip.err.on { background: rgba(255,95,107,0.16); border-color: rgba(255,95,107,0.5); }

.dp-console {
  background: rgba(0, 0, 0, 0.45);
  min-height: 190px;
  max-height: 240px;
  overflow: auto;
  padding: 0.65rem 0.85rem;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.7;
}
.dp-line { display: block; color: #9fdcff; white-space: pre-wrap; word-break: break-word; }
.dp-line.ok { color: #46e6a8; }
.dp-line.dim { color: rgba(255,255,255,0.35); }
.dp-line.warn { color: #ffd17d; }
.dp-line.error, .dp-line.err { color: #ff8b95; }

/* --- inspector --- */
.dp-insp-badge {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; /* padding set by the micro-badge rhythm block above */
  color: var(--muted); border: 1px solid rgba(255,255,255,0.12);
}
.dp-insp-badge.done { color: #46e6a8; border-color: rgba(70,230,168,0.45); }
.dp-insp-badge.warn { color: #ffd17d; border-color: rgba(255,209,125,0.45); }
.dp-insp-badge.error { color: #ff8b95; border-color: rgba(255,95,107,0.45); }
.dp-insp-badge.skipped, .dp-insp-badge.idle { opacity: 0.7; }

.dp-insp { padding: 0.7rem 0.8rem; max-height: 240px; overflow-y: auto; }
.dp-insp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.dp-insp-name { font-weight: 800; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.dp-insp-name i { color: color-mix(in srgb, var(--accent) 82%, #fff); }
.dp-insp-kind { font-size: 0.72rem; color: var(--muted); font-weight: 650; }
.dp-insp-sec + .dp-insp-sec { margin-top: 0.75rem; }
.dp-insp-h {
  display: block;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 60%, var(--muted));
  margin-bottom: 0.35rem;
}
.dp-insp-h em { font-style: normal; opacity: 0.75; font-family: ui-monospace, Consolas, monospace; }

.dp-kvs, .dp-stats { display: grid; grid-template-columns: 1fr; gap: 0.18rem; }
.dp-kv, .dp-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  font-size: 0.76rem;
  padding: 0.18rem 0.4rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}
.dp-kv span, .dp-stat span { color: var(--muted); font-weight: 650; flex: 0 0 auto; }
.dp-kv b, .dp-stat b {
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 700; text-align: right;
  color: color-mix(in srgb, var(--text) 92%, var(--accent));
  overflow-wrap: anywhere;
}
.dp-stat b { color: color-mix(in srgb, var(--accent) 78%, #fff); }
.dp-pre {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #cfe6ff;
  white-space: pre;
  overflow-x: auto;
}
.dp-empty { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }

/* --- run history --- */
.dp-hist-note { font-size: 0.7rem; color: var(--muted); font-weight: 650; }
.dp-hist-scroll { max-height: 168px; overflow-y: auto; }
.dp-hist { list-style: none; margin: 0; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.22rem; }
/* 0.55rem matches .dp-hist-item so the empty text and the run rows that replace
   it share a left edge (they were 0.8px apart). */
.dp-hist-empty { color: var(--muted); font-size: 0.78rem; padding: 0.7rem 0.55rem; line-height: 1.5; }
.dp-hist-item {
  width: 100%;
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font: inherit; font-size: 0.76rem;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease;
}
.dp-hist-item:hover { background: rgba(255,255,255,0.07); }
.dp-hist-item.sel { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.03)); }
.dp-h-time { font-family: ui-monospace, Consolas, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
.dp-h-badge {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px; /* padding set by the micro-badge rhythm block above */
  border: 1px solid rgba(255,255,255,0.14);
}
.dp-h-badge.ok { color: #46e6a8; border-color: rgba(70,230,168,0.45); background: rgba(70,230,168,0.08); }
.dp-h-badge.warn { color: #ffd17d; border-color: rgba(255,209,125,0.45); background: rgba(255,209,125,0.08); }
.dp-h-badge.fail { color: #ff8b95; border-color: rgba(255,95,107,0.5); background: rgba(255,95,107,0.1); }
.dp-h-dry {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #9fdcff; border: 1px solid rgba(159,220,255,0.4); border-radius: 999px;
  /* padding set by the micro-badge rhythm block above */
}
.dp-h-meta { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; }
.dp-h-id { margin-left: auto; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; }

/* ===================== DEMO 2: auto-scrape ===================== */

.scr { padding: 1rem 1.1rem 1.2rem; }

.scr-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.scr-title { font-weight: 800; display: inline-flex; align-items: center; gap: 0.55rem; }
.scr-title i { color: color-mix(in srgb, var(--accent) 82%, #fff); }
.scr-sim { font-size: 0.62rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scr-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.scr .mini-btn { height: 34px; padding: 0 0.75rem; font-size: 0.82rem; }
.scr .mini-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.scr .mini-btn.on { border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.14)); background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,0.05)); }

/* --- config drawer --- */
.scr-config {
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,0.10));
  background: rgba(0,0,0,0.26);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.85rem;
  animation: scrDrawer 220ms ease;
}
@keyframes scrDrawer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.scr-config[hidden] { display: none; }
.scr-cfg-note {
  display: flex; gap: 0.5rem; align-items: flex-start;
  margin: 0 0 0.7rem; color: var(--muted); font-size: 0.78rem; line-height: 1.5;
}
.scr-cfg-note i { color: color-mix(in srgb, var(--accent) 75%, #fff); margin-top: 0.15rem; }
.scr-cfg-note code { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; color: color-mix(in srgb, var(--accent) 80%, var(--text)); }
.scr-cfg-scroll { overflow-x: auto; min-width: 0; }
.scr-cfg-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; min-width: 520px; }
.scr-cfg-table th {
  text-align: left; padding: 0.32rem 0.5rem; /* matched to .scr-cfg-table td */
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid rgba(255,255,255,0.1);
}
.scr-cfg-table td { padding: 0.32rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.scr-cfg-url { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; white-space: nowrap; }
.scr-cfg-ok { color: #46e6a8; font-weight: 700; white-space: nowrap; }
.scr-cfg-table select, .scr-cfg-field select {
  height: 30px; padding: 0 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--text); font: inherit; font-size: 0.76rem; cursor: pointer;
  max-width: 100%;
}
.scr-cfg-table select:disabled, .scr-cfg-field select:disabled { opacity: 0.5; cursor: not-allowed; }
.scr-cfg-global { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin-top: 0.75rem; }
.scr-cfg-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.scr-cfg-field > span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.scr-cfg-hint { margin: 0; color: var(--muted); font-size: 0.72rem; flex: 1 1 160px; }

/* --- meters --- */
.scr-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.scr-meter {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  min-width: 0;
}
.scr-m-k { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.scr-m-v {
  font-size: 0.88rem; font-weight: 800;
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 80%, #fff);
  overflow: hidden; text-overflow: ellipsis;
}
.scr-m-v.stateidle { color: var(--muted); }
.scr-m-v.staterunning { color: #9fdcff; }
.scr-m-v.statepaused { color: #ffd17d; }
.scr-m-v.statedone { color: #46e6a8; }
.scr-m-v.statecancelled { color: #ff8b95; }

/* --- source rows --- */
.scr-sources { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.85rem; }
.scr-src {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
}
.scr-src-name { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.scr-bar i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent2) 70%, transparent));
  transition: width 240ms linear;
}
.scr-status {
  min-width: 96px; text-align: right;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.scr-status.fetching { color: #9fdcff; }
.scr-status.parsing { color: #ffd17d; }
.scr-status.done { color: #46e6a8; }
.scr-status.warn { color: #ffd17d; }
.scr-status.err { color: #ff8b95; }
.scr-status.cancelled { color: #ff8b95; opacity: 0.75; }

/* --- results --- */
.scr-results-wrap { border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; }
.scr-results-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.scr-rh-title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.scr-dedupe {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-size: 0.66rem; font-weight: 750;
  color: #ffd17d;
  border: 1px solid rgba(255,209,125,0.4);
  background: rgba(255,209,125,0.09);
  border-radius: 999px; /* padding set by the micro-badge rhythm block above */
}
.scr-filter-wrap {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: auto;
  padding: 0 0.55rem;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  min-width: 0;
}
.scr-filter-wrap i { font-size: 0.7rem; color: var(--muted); }
.scr-filter {
  border: 0; background: transparent; outline: none;
  color: var(--text); font: inherit; font-size: 0.76rem;
  width: 118px; min-width: 0;
}
.scr-filter::placeholder { color: var(--muted); }
.scr-count { color: color-mix(in srgb, var(--accent) 82%, #fff); font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.scr-table-scroll { max-height: 210px; overflow: auto; min-width: 0; }
.scr-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; min-width: 520px; }
.scr-table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 0; margin: 0;
  background: #0d1020;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}
.scr-th {
  width: 100%;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.36rem 0.8rem; /* matched to .scr-table td */
  background: transparent; border: 0;
  color: var(--muted);
  font: inherit; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.scr-th i { font-size: 0.62rem; opacity: 0.55; }
.scr-table th.sorted .scr-th { color: color-mix(in srgb, var(--accent) 82%, #fff); }
.scr-table th.sorted .scr-th i { opacity: 1; }
.scr-table th.num .scr-th { justify-content: flex-end; }
.scr-table td { padding: 0.36rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
.scr-table tbody tr:last-child td { border-bottom: 0; }
.scr-table tbody tr.in { animation: scrRowIn 240ms ease; }
.scr-c-sku { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.scr-c-name { color: var(--text); font-weight: 650; }
.scr-c-src { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 0.7rem; }
.scr-c-stock { color: var(--muted); font-variant-numeric: tabular-nums; }
.scr-c-stock .oos { color: #ff8b95; font-weight: 700; font-size: 0.7rem; }
.scr-c-price { text-align: right; font-weight: 800; color: color-mix(in srgb, var(--accent) 82%, #fff); font-variant-numeric: tabular-nums; }
.scr-table .scr-empty td { color: var(--muted); text-align: center; padding: 1.15rem; white-space: normal; }

@keyframes scrRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- export --- */
.scr-export {
  margin-top: 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.10));
  background: rgba(0,0,0,0.4);
  overflow: hidden;
  animation: scrCsvIn 300ms ease;
}
.scr-export[hidden] { display: none; }
@keyframes scrCsvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.scr-export-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.scr-tabs { display: inline-flex; gap: 0.25rem; }
.scr-tab {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 26px; padding: 0 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font: inherit; font-size: 0.72rem; font-weight: 750;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.scr-tab.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.04)); border-color: color-mix(in srgb, var(--accent) 50%, rgba(255,255,255,0.14)); }
.scr-export-note { font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.scr-copy {
  margin-left: auto;
  height: 26px; padding: 0 0.6rem;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.04));
  color: var(--text); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: background 180ms ease;
}
.scr-copy:hover { background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.04)); }
.scr-copy.copied { color: #46e6a8; border-color: rgba(70,230,168,0.5); }
.scr-csv-body {
  margin: 0;
  padding: 0.65rem 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.6;
  color: #cfe6ff;
  white-space: pre;
  overflow-x: auto;
  max-height: 190px;
  overflow-y: auto;
  min-height: 3.6rem;
}

/* ===================== DEMO 3: auto-cron ===================== */

.cron {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.1rem;
}
@media (min-width: 860px) { .cron { grid-template-columns: 1.05fr 1fr; align-items: start; } }

.cron-build { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.cron-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.cron-lbl { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

.cron-presets { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.cron-preset {
  height: 28px; padding: 0 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font: inherit; font-size: 0.74rem; font-weight: 700;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.cron-preset:hover { color: var(--text); }
.cron-preset.on {
  color: #06111f;
  background: color-mix(in srgb, var(--accent) 82%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.cron-custom {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.14));
  border-radius: 999px; /* padding set by the micro-badge rhythm block above */
}
.cron-custom[hidden] { display: none; }

.cron-freq, .cron-policy { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cron-seg {
  height: 32px; padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font: inherit; font-weight: 750; font-size: 0.8rem; cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.cron-seg:hover { color: var(--text); }
.cron-seg.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.05));
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.14));
}
.cron-policy-note { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; }

.cron-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.7rem;
}
.cron-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cron-field.wide { grid-column: 1 / -1; }
.cron-field > span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cron-field[hidden] { display: none; }
.cron-field select, .cron-input {
  height: 36px; padding: 0 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--text); font: inherit; font-size: 0.84rem; cursor: pointer;
  min-width: 0; width: 100%;
}
.cron-field select:focus, .cron-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.14)); }

.cron-dow { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cron-day {
  width: 36px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font: inherit; font-weight: 800; font-size: 0.74rem; cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.cron-day.on {
  color: #06111f;
  background: color-mix(in srgb, var(--accent) 82%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.cron-parse-row { display: flex; gap: 0.4rem; align-items: stretch; flex-wrap: wrap; }
.cron-input {
  flex: 1 1 170px;
  cursor: text;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.03em;
}
.cron-parse .mini-btn { height: 36px; padding: 0 0.75rem; font-size: 0.8rem; white-space: nowrap; }
.cron-parse-msg { margin: 0; min-height: 1.1rem; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.cron-parse-msg.err { color: #ff8b95; }
.cron-parse-msg.ok { color: #46e6a8; }

.cron-out {
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}
.cron-phrase {
  font-size: 1rem; font-weight: 800; line-height: 1.4; color: var(--text);
  transition: opacity 200ms ease, transform 200ms ease;
}
.cron-phrase.flip { opacity: 0; transform: translateY(6px); }

.cron-expr-row { display: flex; align-items: stretch; gap: 0.45rem; min-width: 0; }
.cron-expr {
  flex: 1;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.92rem; letter-spacing: 0.04em;
  color: #cfe6ff;
  overflow-x: auto;
  min-width: 0;
}
.cron-part {
  position: relative; cursor: help;
  padding: 0.05rem 0.2rem;
  border-radius: 5px;
  border-bottom: 2px dotted color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.cron-part:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #fff; }
.cron-part .cron-tt {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: #0b0e18;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.14));
  color: var(--text);
  font-family: system-ui, sans-serif;
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 5;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.cron-part:hover .cron-tt { opacity: 1; transform: translateX(-50%) translateY(0); }

.cron-copy {
  width: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.04));
  color: var(--text); cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
  flex: 0 0 auto;
}
.cron-copy:hover { background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.04)); }
.cron-copy.copied { color: #46e6a8; border-color: rgba(70,230,168,0.5); }

.cron-countdown {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; font-weight: 700;
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  font-variant-numeric: tabular-nums;
}
.cron-countdown i { font-size: 0.76rem; opacity: 0.8; }

.cron-next-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.cron-next-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cron-next-tz { font-size: 0.7rem; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); font-family: ui-monospace, Consolas, monospace; }

.cron-strip-scroll { overflow-x: auto; min-width: 0; margin-top: 0.45rem; padding-bottom: 0.25rem; }
.cron-strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; }
.cron-cell {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  min-width: 58px;
  padding: 0.4rem 0.45rem 0.35rem;
  border-radius: 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
}
.cron-cell.today { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,0.3)); }
.cc-dow { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cc-day { font-size: 1.05rem; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.cc-mon { font-size: 0.6rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cc-time { font-size: 0.74rem; font-weight: 800; color: color-mix(in srgb, var(--accent) 82%, #fff); font-family: ui-monospace, Consolas, monospace; margin-top: 0.15rem; }
.cc-rel { font-size: 0.58rem; font-weight: 700; color: var(--muted); }

.cron-crontab { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cron-ct-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cron-ct-head .scr-copy { margin-left: 0; }
.cron-ct-body {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.71rem;
  line-height: 1.6;
  color: #cfe6ff;
  white-space: pre;
  overflow-x: auto;
  min-width: 0;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 620px) {
  .demo-pipe, .scr, .cron { padding-left: 0.75rem; padding-right: 0.75rem; }
  .dp-console { min-height: 150px; max-height: 190px; }
  .dp-insp { max-height: 220px; }
  .dp-h-id { display: none; }
  .scr-filter-wrap { margin-left: 0; width: 100%; }
  .scr-filter { width: 100%; flex: 1; }
  .scr-count { margin-left: auto; }
  .scr-src { grid-template-columns: 1fr auto; }
  .scr-src .scr-bar { grid-column: 1 / -1; order: 3; }
  .scr-actions { width: 100%; }
  .scr-actions .mini-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .dp-badges { width: 100%; }
  .dp-controls .mini-btn { flex: 1 1 auto; justify-content: center; }
  .cron-fields { grid-template-columns: 1fr; }
  .scr-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scr-meter.wide { grid-column: 1 / -1; }
}

/* ===================== REDUCED MOTION ===================== */

@media (prefers-reduced-motion: reduce) {
  .dp-edge.sending .dp-packet { animation: none; }
  .dp-node.running .dp-light,
  .dp-node.error .dp-light { animation: none; }
  .dp-node:hover { transform: none; }
  .scr-bar i { transition: none; }
  .scr-table tbody tr.in { animation: none; }
  .scr-export, .scr-config { animation: none; }
  .cron-phrase { transition: none; }
}