/* Data engineering and analytics (homepage #data). Real figures with sources; the cleaning card is a sample.
   Charts draw once when scrolled into view; reduced motion shows the final state. */

.data-sec { --c-a: var(--cyan-400); --c-b: #f2b84b; --c-c: #8fb3ff; padding-top: 0; }
.data__head { display: grid; gap: var(--s-3); max-width: 68ch; margin-bottom: var(--s-6); }
.data__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.dcard--clean { grid-column: 1 / -1; }

.dcard { display: grid; align-content: start; gap: var(--s-2); min-width: 0; padding: var(--s-4); border-radius: var(--r-card); color: var(--text-light); background: linear-gradient(160deg, #0b1a30, #071426 70%); box-shadow: 0 24px 60px rgb(7 20 38 / 22%), inset 0 0 0 1px rgb(255 255 255 / 7%); }
.dcard p { margin: 0; }
.dcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.dcard__sector { color: var(--cyan-400); font: 500 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.dcard__title { margin: 0; color: var(--white-100); font: 500 1.125rem/1.25 var(--font-display); letter-spacing: -.01em; }
.dcard__stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.dcard__stat strong { color: var(--white-100); font: 600 2.25rem/1 var(--font-display); letter-spacing: -.03em; }
.dcard__stat span { color: var(--text-muted); font-size: var(--fs-small); }
.dcard__use { color: rgb(220 230 245 / 82%); font-size: var(--fs-small); line-height: 1.55; }
.dcard__src { padding-top: var(--s-2); border-top: 1px solid rgb(255 255 255 / 8%); color: var(--text-muted); font: 500 10.5px/1.45 var(--font-mono); letter-spacing: .02em; }
.dcard__replay { padding: 4px 12px; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--r-pill); color: var(--text-light); background: transparent; font: 500 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.dcard__replay:hover, .dcard__replay:focus-visible { border-color: var(--cyan-400); color: var(--cyan-400); }

/* Charts: outline strokes with a soft glow, as on a dark dashboard. */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid path { stroke: rgb(255 255 255 / 9%); stroke-width: 1; fill: none; }
.chart text { fill: rgb(200 212 230 / 70%); font: 500 9.5px var(--font-mono); }
.chart__axis text { text-anchor: end; }
.chart__cats text, .chart__vals text { text-anchor: middle; }
.chart__vals text { fill: var(--white-100); font-size: 10px; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-muted); font: 500 10.5px/1.3 var(--font-mono); }
.k::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.k--a::before { border: 1.5px solid var(--c-c); background: rgb(143 179 255 / 16%); }
.k--b::before { border: 1.5px solid var(--c-a); background: rgb(34 213 245 / 20%); }

.bar { stroke-width: 1.6; }
.bar--a { stroke: var(--c-c); fill: rgb(143 179 255 / 14%); }
.bar--b { stroke: var(--c-a); fill: rgb(34 213 245 / 18%); filter: drop-shadow(0 0 6px rgb(34 213 245 / 45%)); }
.bar--down { stroke: var(--c-b); fill: rgb(242 184 75 / 18%); filter: drop-shadow(0 0 6px rgb(242 184 75 / 40%)); }

.ring { fill: none; stroke: rgb(255 255 255 / 7%); stroke-width: 18; }
.arc { fill: none; stroke-width: 2.4; stroke-linecap: butt; }
.arc--glow { stroke-width: 18; opacity: .22; }
.arc--a { stroke: var(--c-a); }
.arc--b { stroke: var(--c-b); }
.arc:not(.arc--glow).arc--a { filter: drop-shadow(0 0 5px rgb(34 213 245 / 60%)); }
.donut__big { fill: var(--white-100) !important; font: 600 28px var(--font-display) !important; text-anchor: middle; }
.donut__small { text-anchor: middle; }
.donut__legend text { fill: rgb(220 230 245 / 85%); font-size: 11px; }
.donut__legend text.v { fill: var(--white-100); font: 600 15px var(--font-display); }
.sw--a { fill: rgb(34 213 245 / 25%); stroke: var(--c-a); }
.sw--b { fill: rgb(242 184 75 / 25%); stroke: var(--c-b); }

.trend__line { fill: none; stroke: var(--c-a); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(34 213 245 / 55%)); }
.trend__area { fill: rgb(34 213 245 / 9%); }
.trend__dot { fill: var(--c-a); filter: drop-shadow(0 0 6px rgb(34 213 245 / 80%)); }
.trend__note { fill: var(--white-100) !important; }

/* Draw-in, once, when the card enters the viewport. */
.js [data-chart] .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 900ms var(--e-out) var(--d, 0ms); }
.js [data-chart] :is(.chart__vals, .trend__area, .trend__dot, .trend__note, .donut__big, .donut__small) { opacity: 0; transition: opacity 600ms var(--e-out) 1100ms; }
.js [data-chart] .trend__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2000ms var(--e-out); }
.js [data-chart] .arc { transition: stroke-dasharray 1100ms var(--e-out) var(--d, 0ms); }
.js [data-chart]:not(.is-live) .arc { stroke-dasharray: 0 100; }
.js [data-chart].is-live .bar { transform: none; }
.js [data-chart].is-live :is(.chart__vals, .trend__area, .trend__dot, .trend__note, .donut__big, .donut__small) { opacity: 1; }
.js [data-chart].is-live .trend__line { stroke-dashoffset: 0; }

/* Cleaning simulation */
.dcard--clean .sim__steps { margin: var(--s-1) 0 var(--s-2); }
.clean { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: var(--s-4); align-items: start; }
.clean__label { margin-bottom: 8px !important; color: var(--text-muted); font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.clean table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.clean th { padding: 6px 8px; border-bottom: 1px solid rgb(255 255 255 / 12%); color: var(--text-muted); font: 500 10px/1.2 var(--font-mono); letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.clean td { padding: 7px 8px; border-bottom: 1px solid rgb(255 255 255 / 6%); color: rgb(225 233 245 / 90%); white-space: pre; }
.clean__table--out td { color: var(--white-100); }
.bad, .dup td, .held td { transition: color var(--d-2) var(--e-out), background var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out); }
.bad { border-radius: 4px; }
.bad.is-marked { color: #ffb3a6; background: rgb(255 120 100 / 14%); text-decoration: line-through; text-decoration-color: rgb(255 140 120 / 60%); }
.dup.is-marked td { opacity: .35; text-decoration: line-through; }
.held.is-marked td { color: var(--c-b); background: rgb(242 184 75 / 8%); }
.clean__rules { display: grid; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.clean__rules li { padding: 6px 10px; border: 1px solid rgb(34 213 245 / 26%); border-radius: 8px; background: rgb(34 213 245 / 7%); font: 500 11px/1.35 var(--font-mono); }
.clean__rules li::before { content: "✓ "; color: var(--cyan-400); }
.clean__rules li.warn { border-color: rgb(242 184 75 / 40%); color: var(--c-b); background: rgb(242 184 75 / 8%); }
.clean__rules li.warn::before { content: "! "; color: var(--c-b); }
.clean__held { margin-top: 10px !important; color: var(--c-b); font: 500 11px/1.4 var(--font-mono); }
.clean__report { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.clean__report p { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px rgb(34 213 245 / 16%); }
.clean__report span { color: var(--text-muted); font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.clean__report strong { color: var(--white-100); font: 600 1.25rem/1.1 var(--font-display); }

.js [data-timeline] [data-at] { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--e-out), transform 420ms var(--e-out); }
.js [data-timeline] [data-at].is-on { opacity: 1; transform: none; }

.data__cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--line-light), var(--depth-1); }
.data__cta p { max-width: 62ch; margin: 0; color: var(--text-dim); }
.data__cta strong { color: var(--text-dark); }

@media (max-width: 1100px) {
  .data__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clean { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .clean__rules { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
}
@media (max-width: 700px) {
  .data__grid { grid-template-columns: minmax(0, 1fr); }
  .clean { grid-template-columns: minmax(0, 1fr); }
  .clean__rules { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clean table { font-size: 11.5px; }
  .clean td, .clean th { padding: 6px 5px; }
  .clean__report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data__cta { padding: var(--s-4); }
  .data__cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-chart] .bar, .js [data-chart] .trend__line, .js [data-chart] .arc, .js [data-chart] :is(.chart__vals, .trend__area, .trend__dot, .trend__note, .donut__big, .donut__small),
  .js [data-timeline] [data-at] { transition: none; }
}

/* Tablet: the third chart takes the full row instead of leaving a gap; its chart stays a readable size. */
@media (min-width: 701px) and (max-width: 1100px) {
  .data__grid > .dcard:last-child { grid-column: 1 / -1; }
  .data__grid > .dcard:last-child .chart { max-width: 460px; }
}

/* Smallest phones: report figures fit their tiles. */
@media (max-width: 420px) {
  .clean__report span { letter-spacing: .03em; overflow-wrap: anywhere; }
  .clean__report strong { font-size: 1.02rem; }
}