/*
 * Data management (page 14158, template page-data). Concept "זרימת הנתונים": sources → cleaning → one source of
 * truth, a before/after example record, and a database built layer by layer.
 * Palette: deep ocean ink, mist paper, teal signal, amber accent (fills, or behind ink text only).
 */

:root, .sv-page--data {
	--sv-ink: #0a2230;
	--sv-ink-2: #10303f;
	--sv-ink-3: #24485a;
	--sv-paper: #eef5f6;
	--sv-paper-2: #dde9ec;
	--sv-card: #f9fcfc;
	--sv-line: #c3d6db;
	--sv-line-strong: #7f9ea8;
	--sv-muted: #43606a;
	--sv-signal: #0a7f95;
	--sv-signal-deep: #076a7d;
	--sv-signal-soft: #7fd6e4;
	--sv-accent: #ffb547;
	--sv-alert: #b0402a;
	--sv-on-ink: #eef5f6;
	--sv-on-ink-muted: #a9c2c9;
	--sv-on-ink-line: #2a4a59;
	--sv-on-signal: #ffffff;
	--sv-grid: rgba(10, 34, 48, .055);
	--sv-grid-ink: rgba(238, 245, 246, .045);
	--sv-glow: rgba(10, 127, 149, .2);
	--sv-underline: repeating-linear-gradient(90deg, #ffb547 0 .55em, transparent .55em .75em);
	--sv-cta-mark: "{ }";
}

/* ---------- Hero: data flow ---------- */
.dt-flow { display: grid; gap: 0; }
.dt-flow__stage { position: relative; display: grid; gap: .5rem; padding: .9rem 1rem; border: 1.5px solid var(--sv-ink); border-radius: var(--sv-radius); background: var(--sv-paper); }
.dt-flow__stage + .dt-flow__stage { margin-block-start: 2.2rem !important; }
.dt-flow__stage + .dt-flow__stage::before { /* the pipe between stages */
	content: ""; position: absolute; bottom: calc(100% + 1.5px); left: 50%; width: 2px; height: 2.2rem; translate: -1px 0;
	background: repeating-linear-gradient(var(--sv-ink) 0 5px, transparent 5px 9px);
}
.dt-flow__stage + .dt-flow__stage::after { /* a record travelling down the pipe */
	content: ""; position: absolute; bottom: calc(100% + 2.2rem); left: 50%; width: 10px; height: 10px; translate: -5px 0; border-radius: 2px;
	background: var(--sv-signal); opacity: 0;
}
.dt-flow__label { font-family: var(--sv-sans); font-size: .8125rem; font-weight: 700; color: var(--sv-muted); }
.dt-flow__sources { display: flex; flex-wrap: wrap; gap: .35rem; }
.dt-flow__sources li { padding: .2rem .6rem; font-size: .8125rem; font-weight: 700; background: var(--sv-card); border: 1px solid var(--sv-line-strong); border-radius: 999px; }
.dt-flow__steps { display: grid; gap: .25rem; }
.dt-flow__steps li { position: relative; padding-inline-start: 1.5rem; font-size: .875rem; font-weight: 500; }
.dt-flow__steps li::before { content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sv-signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .7rem no-repeat; }
.dt-flow__stage--clean { background: var(--sv-card); }
.dt-flow__stage--out { background: var(--sv-accent); text-align: center; }
.dt-flow__out { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.dt-flow__en { display: block; font-family: var(--sv-mono); font-size: .75rem; font-weight: 500; letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) {
	.dt-flow__stage { animation: sv-pop .45s var(--sv-ease) both; }
	.dt-flow__stage--clean { animation-delay: .35s; } .dt-flow__stage--out { animation-delay: .7s; }
	.dt-flow__stage + .dt-flow__stage::after { animation: dt-drop 2.8s var(--sv-ease) 1.2s infinite; }
	.dt-flow__stage--out::after { animation-delay: 2.6s !important; }
}
@keyframes dt-drop { 0% { bottom: calc(100% + 2.2rem); opacity: 0; } 15% { opacity: 1; } 70% { bottom: calc(100% + .1rem); opacity: 1; } 100% { bottom: calc(100% + .1rem); opacity: 0; } }

/* ---------- Before / after example (ink section) ---------- */
.dt-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.dt-compare > .sv-figcap { grid-column: 1 / -1; }
.dt-compare__col { display: grid; gap: .5rem; }
.dt-compare__label { font-family: var(--sv-sans); font-size: .8125rem; font-weight: 700; color: var(--sv-on-ink-muted); }
.dt-rows { display: grid; gap: .4rem; }
.dt-rows li { display: grid; gap: .1rem; padding: .55rem .75rem; font-size: .875rem; line-height: 1.35; background: var(--sv-ink-2); border: 1px solid var(--sv-on-ink-line); border-radius: var(--sv-radius); }
.dt-rows li span:first-child { font-weight: 700; color: var(--sv-on-ink); }
.dt-rows li span + span { color: var(--sv-on-ink-muted); }
.dt-rows li em { justify-self: start; margin-block-start: .25rem; font-style: normal; font-size: .75rem; font-weight: 700; padding: 0 .5rem; border-radius: 999px; border: 1px solid currentColor; }
.dt-rows li.is-dup, .dt-rows li.is-missing { border-style: dashed; }
.dt-rows li.is-dup em, .dt-rows li.is-missing em { color: #ffb4a2; }
.dt-rows li.is-clean { background: var(--sv-accent); border-color: var(--sv-accent); }
.dt-rows li.is-clean span:first-child, .dt-rows li.is-clean span + span { color: var(--sv-ink); }
.dt-rows li.is-clean em { color: var(--sv-ink); }
.dt-compare__col--after { position: relative; }
.dt-compare__col--after::before { content: "←"; position: absolute; inset-inline-start: -1rem; top: 2.6rem; translate: -50% 0; font-family: var(--sv-mono); color: var(--sv-accent); }
@media (max-width: 420px) {
	.dt-compare { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
	.dt-compare__col--after::before { display: none; }
}

/* ---------- Database layers (stages) ---------- */
.dt-stack .sv-zone__bar { fill: var(--sv-signal); stroke: var(--sv-ink); stroke-width: 1.2; }
.dt-stack .sv-zone__track { fill: var(--sv-signal-soft); stroke: var(--sv-ink); stroke-width: 1.2; }
.dt-stack .sv-zone.is-pending .sv-zone__track { fill: var(--sv-paper-2); stroke: var(--sv-line-strong); stroke-dasharray: 4 4; }
.dt-stack .sv-zone.is-pending .sv-zone__bar { opacity: 1; fill: transparent; stroke: var(--sv-line-strong); stroke-dasharray: 4 4; }
.dt-stack .sv-zone.is-current .sv-zone__track { fill: #ffe0ad; }