/* Experivio: Data Analyzer 3.0. Built on the Home 3.0 tokens (--h-*): accent, light/dark and motion settings carry over. */
.data3{overflow-anchor:none;--pri:var(--h-pri);--pri2:var(--h-blue);--card:var(--h-surface);--soft:var(--h-surface2);--line:var(--h-line);--ink:var(--h-ink);--mut:var(--h-mut);--ok:var(--h-ok);--bad:var(--h-bad);--bg:var(--h-bg);
  --g3a:var(--h-pri);--g3s:var(--h-surface);max-width:1480px;margin:0 auto;color:var(--h-ink)}
.data3 .btn:not(.alt){background:var(--h-grad);color:#fff}
.data3 .btn{transition:transform var(--h-dur-fast),box-shadow var(--h-dur-fast)}
.data3 .btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--h-e2)}.data3 .btn:not(:disabled):active{transform:scale(.985)}
.data3 .btn.alt{background:var(--h-surface2);color:var(--h-ink)}
.data3 :focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.data3 .card.da3-card{border-radius:22px;padding:clamp(16px,1.4vw + 10px,28px);background:var(--h-surface);border-color:var(--h-line);box-shadow:var(--h-e1);margin:0 0 var(--h-gap)}
.data3 h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:clamp(1.15rem,.5vw + 1rem,1.45rem);margin:0 0 6px}
.data3 h2 .ic{color:var(--h-pri)}
.da3-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:var(--h-gap);padding:clamp(18px,1.6vw + 12px,34px);border-radius:22px;background:var(--h-grad);color:#fff;box-shadow:var(--h-e3);margin-bottom:var(--h-gap);animation:dz3hero .55s cubic-bezier(.22,1,.36,1) both}
.da3-hero::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent);z-index:-1}
.da3-hero h1{color:#fff;margin:6px 0;font-size:clamp(24px,1.4vw + 17px,38px);letter-spacing:-.02em}
.da3-hero .dz3-eyebrow{color:rgba(255,255,255,.82)}
.da3-lede{margin:0 0 12px;color:rgba(255,255,255,.92);max-width:60ch}
.da3-hstep ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:s}
.da3-hstep li{counter-increment:s;padding:10px 10px 10px 12px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:700}
.da3-hstep li::before{content:counter(s);display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;border-radius:50%;border:2px solid rgba(255,255,255,.55);font-size:12px}
.da3-hstep li.ok::before{background:#fff;color:#2b6b4f;border-color:#fff;content:"✓"}.da3-hstep li.on{background:rgba(255,255,255,.24)}
@container main (min-width:900px){.da3-hero{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);align-items:center}.da3-hstep ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (max-width:520px){.da3-hstep ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
.da3-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px;margin:0 0 var(--h-gap);border-radius:14px;background:color-mix(in srgb,var(--h-pri) 8%,var(--h-surface));border:1px solid color-mix(in srgb,var(--h-pri) 25%,var(--h-line))}
.da3-card .da3-note{margin:8px 0}
.da3-note>span{flex:1 1 16rem;min-width:0}.da3-note .btn{margin:0}
.da3-note.warnish{background:var(--h-warn-bg);color:var(--h-ink);border-color:color-mix(in srgb,var(--h-warn) 40%,transparent)}
.da3-labels{margin:6px 0 4px}
.da3-part{font-weight:500;font-size:.93rem}
/* measurements table: sticky condition column, comfortable minimum widths, scrolls inside its own box */
.data3 .da3-tbl{border:1px solid var(--h-line);border-radius:14px;margin-top:8px}
.data3 .datatab{border-collapse:separate;border-spacing:0;min-width:100%}
.data3 .datatab th,.data3 .datatab td{padding:6px 8px;border-bottom:1px solid var(--h-line);white-space:nowrap}
.data3 .datatab thead th{background:var(--h-surface2);color:var(--h-ink);font-size:.86rem;text-align:left;position:sticky;top:0;z-index:2}
.data3 .datatab td input{min-width:84px;width:100%;min-height:44px;font-variant-numeric:tabular-nums}
.data3 .datatab td:first-child,.data3 .datatab thead th:first-child{position:sticky;left:0;z-index:1;background:var(--h-surface)}
.data3 .datatab thead th:first-child{z-index:3;background:var(--h-surface2)}
.data3 .datatab td:first-child input{min-width:150px;font-weight:600}
.data3 .datatab input[aria-invalid="true"]{border-color:var(--h-bad);background:var(--h-bad-bg)}
.data3 .datatab tr.hl td{background:color-mix(in srgb,var(--h-pri) 10%,var(--h-surface))}
.da3-x{min-width:44px}
.da3-tblb{margin-top:8px}.da3-tblb .btn{margin:0}
/* recommendations */
.da3-rh h2{margin-bottom:2px}
.da3-src{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.88rem;color:var(--h-mut);margin:8px 0}
.da3-rl{list-style:none;margin:8px 0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:900px){.da3-rl{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}
.da3-rc{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;border:1px solid var(--h-line);background:var(--h-surface);box-shadow:var(--h-e1);transition:transform var(--h-dur-fast),box-shadow var(--h-dur-fast)}
.da3-rc:hover{transform:translateY(-2px);box-shadow:var(--h-e2)}
.da3-rc.best{border:2px solid color-mix(in srgb,var(--h-pri) 55%,var(--h-line));background:linear-gradient(160deg,color-mix(in srgb,var(--h-pri) 8%,var(--h-surface)),var(--h-surface))}
.da3-rc h3{margin:0;font-size:1.05rem}.da3-rc p{margin:0}.da3-rc .row{margin-top:auto;padding-top:4px}.da3-rc .btn{margin:0}
.da3-rk{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--h-pri-ink)}
.da3-rc details summary,.da3-why summary,.da3-help summary{cursor:pointer;font-weight:700;color:var(--h-pri-ink);min-height:40px;display:flex;align-items:center}
.da3-why{margin:6px 0;padding:2px 14px;border-radius:12px;background:var(--h-surface2)}
.da3-more .chip{margin:2px}
/* graph cards */
.da3-ghead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.da3-types{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;max-width:100%;scrollbar-width:thin}
.da3-types .chip{flex:none;min-height:40px}
.g3card{position:relative;min-width:0}
.g3head{margin:10px 0 4px}.g3t{margin:0;font-size:clamp(1.02rem,.4vw + .95rem,1.2rem)}.g3sub{margin:2px 0 0;color:var(--h-mut);font-size:.88rem}
.da3-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.chip.sm{min-height:36px;font-size:.84rem;padding:4px 11px}
.da3-sel{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:650;margin:0}
.da3-sel select{min-height:36px;padding:4px 8px;width:auto}
.g3plot{position:relative;border-radius:16px;background:var(--h-surface);border:1px solid var(--h-line);padding:6px 4px 2px;min-width:0}
.g3plot.g3swap svg{animation:g3in .38s ease both}
@keyframes g3in{from{opacity:0}to{opacity:1}}
#chart,.g3slot{min-width:0}
.g3svg{display:block;width:100%;height:auto;overflow:visible}
.g3grid{stroke:var(--h-line)}.g3grid.z{stroke:color-mix(in srgb,var(--h-ink) 45%,transparent)}
.g3tick{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12px;fill:var(--h-mut);font-variant-numeric:tabular-nums}
.g3cat,.g3axt{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12.5px;font-weight:600;fill:var(--h-ink)}
.g3bar{fill:var(--h-pri);opacity:.88;transition:opacity .2s}
.g3c:hover .g3bar,.g3bar:focus{opacity:1}
.g3dot{fill:var(--h-ink);stroke:var(--h-surface);stroke-width:1.5;cursor:pointer}
.g3dot.o,.g3out{fill:#d9480f;stroke:var(--h-surface)}
.g3err{stroke:var(--h-ink);stroke-width:2;fill:none}
.g3line{fill:none;stroke:var(--h-pri);stroke-width:3;stroke-linejoin:round}
.g3avg{fill:var(--h-blue);stroke:var(--h-surface);stroke-width:2;cursor:pointer}
.g3fit{stroke:var(--h-ok);stroke-width:2.5}
.g3box{fill:color-mix(in srgb,var(--h-pri) 16%,var(--h-surface));stroke:var(--h-deep);stroke-width:2;cursor:pointer}
:root[data-theme="dark"] .g3box{stroke:var(--h-pri)}
.g3med{stroke:var(--h-pri);stroke-width:3}
.g3miss{fill:var(--h-surface2);stroke:var(--h-line);stroke-dasharray:4 3}
.g3cell{font-family:system-ui,sans-serif;font-size:12px;font-weight:650;fill:var(--h-ink)}.g3cell.inv{fill:#fff}
.g3fbx{fill:var(--h-surface2);stroke:color-mix(in srgb,var(--h-pri) 35%,var(--h-line))}
.g3fbx.run{fill:var(--h-pri);stroke:var(--h-deep)}.g3fbx.leaf{fill:var(--h-surface)}
.g3ft{font-family:system-ui,sans-serif;font-size:13px;font-weight:650;fill:var(--h-ink)}.g3fbx.run+.g3ft{fill:#fff}
:root[data-theme="dark"] .g3fbx.run+.g3ft{fill:#14122b}
.g3arr{stroke:var(--h-mut);stroke-width:2;fill:none}
.g3sl{stroke:var(--h-surface);stroke-width:2;cursor:pointer}
.g3c.hl .g3bar{opacity:1;stroke:var(--h-ink);stroke-width:2}
.g3tip{position:absolute;z-index:5;max-width:min(16rem,90%);padding:8px 10px;border-radius:12px;background:var(--h-ink);color:var(--h-surface);font-size:13px;line-height:1.35;box-shadow:var(--h-e2);pointer-events:none}
.g3tip b{color:inherit}
.g3leg{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.9rem}
.g3sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px}
.g3note{font-size:.86rem;color:var(--h-mut);margin:8px 0 4px}
.da3-tools{gap:6px}.da3-tools .btn{margin:0}
.da3-no{padding:14px 16px;border-radius:14px;background:var(--h-warn-bg);color:var(--h-ink)}.da3-no h3{margin:0 0 4px;display:flex;align-items:center;gap:6px;font-size:1rem}
.da3-gal{display:grid;gap:0 var(--h-gap);grid-template-columns:minmax(0,1fr)}
@container main (min-width:1100px){.da3-gal.cmp{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* results: a table that never collapses, or one card per condition */
.da3-sumc{margin:8px 0 12px}
.dz3-stat small{display:block;font-size:12px;color:var(--h-mut);overflow-wrap:anywhere}
.da3-view{margin:4px 0 8px}
.data3 .r3t{border:1px solid var(--h-line);border-radius:14px}
.data3 .stattab{border-collapse:separate;border-spacing:0;min-width:100%;font-variant-numeric:tabular-nums}
.data3 .stattab th,.data3 .stattab td{padding:10px 12px;border-bottom:1px solid var(--h-line);white-space:nowrap;word-break:normal;overflow-wrap:normal}
.data3 .stattab thead th{background:var(--h-surface2);color:var(--h-ink);font-size:.84rem;font-weight:700;text-align:right;min-width:6.5rem;vertical-align:bottom}
.data3 .stattab thead th .u{display:block;font-weight:500;color:var(--h-mut)}
.data3 .stattab th.c{text-align:left;position:sticky;left:0;z-index:1;background:var(--h-surface);min-width:9rem;max-width:16rem;white-space:normal;overflow-wrap:break-word;font-weight:650}
.data3 .stattab .c2{text-align:left}
.data3 .stattab .r3na{color:var(--h-mut)}
.data3 .stattab thead th.c{background:var(--h-surface2);z-index:2}
.data3 .stattab td{text-align:right;min-width:5rem}
.data3 .stattab tbody tr:nth-child(even) td,.data3 .stattab tbody tr:nth-child(even) th{background:color-mix(in srgb,var(--h-pri) 4%,var(--h-surface))}
.data3 .stattab tr.hl td,.data3 .stattab tr.hl th{background:color-mix(in srgb,var(--h-pri) 12%,var(--h-surface))!important}
.r3cards{display:none;list-style:none;margin:0;padding:0;gap:10px;grid-template-columns:minmax(0,1fr)}
/* Results cards. Root cause of the old broken words: the global rule in styles.css (td, th, .card h3, .card p {overflow-wrap:anywhere})
   let the browser split ANY word, and the card grid (label column minmax(0,1fr) beside a nowrap value column carrying a long unit)
   squeezed the label column to a few pixels, so "Average" and "Standard deviation" broke mid-word. Now: words only break at spaces,
   numbers never break, and a value that can't fit beside its label moves underneath it (flex-wrap), never shrinking the label. */
.data3 .r3c,.data3 .r3c *,.data3 .stattab th,.data3 .stattab td,.data3 .g3head *,.data3 .da3-grp *{word-break:normal;overflow-wrap:normal;hyphens:manual}
.r3c{--sc:var(--h-pri);position:relative;padding:16px 18px 14px;border-radius:18px;border:1px solid var(--h-line);background:var(--h-surface);box-shadow:var(--h-e1);min-width:0}
.r3c::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:var(--sc)}
.r3c.hl{border-color:var(--h-pri)}
.r3k{margin:0;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--h-mut)}
.data3 .r3c h3{margin:2px 0 10px;font-size:19px;line-height:1.25;font-weight:750;color:var(--h-ink);overflow-wrap:break-word}/* break-word: only a single word wider than the whole card may split */
.r3avg{display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin:0 0 4px;border-radius:14px;background:color-mix(in srgb,var(--sc) 8%,var(--h-surface))}
.r3al{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,var(--sc) 70%,var(--h-ink))}
.r3av{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.r3av .nb{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.01em;color:var(--h-ink)}
.r3u{font-size:15px;font-weight:650;color:var(--h-mut);white-space:nowrap}
.r3ms{margin:0;padding:0}
.r3ms+.r3ms{border-top:1px solid var(--h-line);margin-top:2px}
.r3m{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:9px 0}
.r3m+.r3m{border-top:1px dashed color-mix(in srgb,var(--h-line) 80%,transparent)}
.r3m dt{flex:0 1 auto;font-size:14px;font-weight:600;color:var(--h-mut);line-height:1.3}
.r3m dd{flex:0 0 auto;margin:0 0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 5px;font-size:16px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--h-ink);max-width:100%}
.data3 .nb{white-space:nowrap;font-variant-numeric:tabular-nums}
.r3na{font-weight:700;color:var(--h-mut)}
.r3m dd small{font-size:13px;font-weight:600;color:var(--h-mut);white-space:nowrap}
.r3fn{margin:12px 0 4px;padding:10px 14px;border-radius:12px;background:var(--h-surface2);color:var(--h-ink)}
.da3-outl{color:#b5410b;margin:6px 0 0}
@container main (max-width:620px){.da3-stats:not(.v-table) .r3t{display:none}.da3-stats:not(.v-table) .r3cards{display:grid}}
.da3-stats.v-cards .r3t{display:none}.da3-stats.v-cards .r3cards{display:grid}
@container main (min-width:700px){.da3-stats.v-cards .r3cards{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}}
@container main (min-width:460px) and (max-width:620px){.da3-stats:not(.v-table) .r3cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.da3-help{display:grid;gap:4px;margin-top:10px}.da3-help details{padding:0 14px;border-radius:12px;background:var(--h-surface2)}.da3-help p{margin:0 0 10px}
/* export center */
.da3-ex{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:640px){.da3-ex{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (min-width:1100px){.da3-ex{grid-template-columns:repeat(3,minmax(0,1fr))}}
.da3-exb{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:14px;border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-ink);font:inherit;text-align:left;cursor:pointer;transition:transform var(--h-dur-fast),box-shadow var(--h-dur-fast),border-color var(--h-dur-fast)}
.da3-exb:hover{transform:translateY(-2px);box-shadow:var(--h-e2);border-color:color-mix(in srgb,var(--h-pri) 40%,var(--h-line))}
.da3-exb .ic{flex:none;color:var(--h-pri)}.da3-exb span{display:flex;flex-direction:column;min-width:0}.da3-exb small{color:var(--h-mut);font-size:12.5px}
.hdlg.da3-dlg{width:min(76rem,calc(100vw - 24px))}
.da3-dlg .g3plot{overflow:auto;max-height:calc(100dvh - 190px)}
@media(max-width:700px){.hdlg.da3-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.hdlg.da3-dlg .dlg-in{min-height:100%;display:flex;flex-direction:column}.da3-dlg .g3plot{flex:1;max-height:none}}
:root[data-motion="off"] .data3 *,:root[data-motion="off"] .data3{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.data3 *,.data3{animation:none!important;transition:none!important}}
.data3 #chart svg:not(.g3svg),.data3 .g3slot svg:not(.g3svg){display:inline-block;width:auto;height:auto}

/* graph: title, method subtitle, Settings, colors, gridlines, taller plots */
.g3head{margin:12px 0 6px}.data3 .g3t{font-size:clamp(1.06rem,.4vw + 1rem,1.25rem);line-height:1.3;letter-spacing:-.01em;overflow-wrap:break-word}
.g3sub{line-height:1.4}
.g3svg{--g3c:var(--h-pri)}
.g3bar{fill:var(--g3c)}.g3line{stroke:var(--g3c)}.g3dot.s{fill:var(--g3c);stroke:var(--h-surface);stroke-width:1.5}
.g3svg.nogrid .g3grid:not(.z){display:none}
.g3grid{stroke:color-mix(in srgb,var(--h-line) 75%,transparent)}
.g3plot.tall{max-height:min(75vh,60rem);overflow-y:auto;overscroll-behavior:contain}
.g3plot{transition:opacity .3s ease}
.g3set{margin:6px 0 8px;border:1px solid var(--h-line);border-radius:14px;background:var(--h-surface2)}
.g3set>summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--h-pri-ink)}
.g3set>summary::-webkit-details-marker{display:none}
.g3set>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.g3set[open]>summary::after{transform:rotate(-135deg)}
.g3set-b{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:4px 12px 12px;animation:g3in .28s ease both}
.g3chks{display:flex;flex-wrap:wrap;gap:6px 14px;flex-basis:100%}
.g3chk{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:.92rem;font-weight:600;margin:0;cursor:pointer}
.g3chk input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--h-pri)}
.g3cols{display:flex;gap:8px;align-items:center}
.g3col{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--h-surface);background:var(--c);box-shadow:0 0 0 1px var(--h-line);cursor:pointer}
.g3col[aria-pressed="true"]{box-shadow:0 0 0 3px var(--h-ink)}
.g3set-f{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.g3leg{font-size:.86rem;color:var(--h-mut)}.g3leg li{display:inline-flex;align-items:center;gap:6px}
/* condition groups question */
.da3-grp{margin:10px 0;padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--h-pri) 30%,var(--h-line));background:color-mix(in srgb,var(--h-pri) 6%,var(--h-surface))}
.da3-grp h3{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:1.02rem}.da3-grp p{margin:0 0 8px}
.da3-grp.on{padding:8px 14px}.da3-grph{display:flex;gap:8px;align-items:flex-start}
.da3-grp .scroll{border:1px solid var(--h-line);border-radius:12px;margin:6px 0 10px;max-height:18rem}
.da3-gtab th,.da3-gtab td{font-size:.9rem}.da3-gtab tbody th{font-weight:600;text-align:left}
.da3-gtab td input{min-width:90px;min-height:40px}
.da3-grp .row .btn{margin:0}

/* ================= Data Studio 3.0: presentation layer (calculations, graphs rules and saved data unchanged) ================= */
.data3{--ds-ease:cubic-bezier(.22,1,.36,1);--ds-grid:color-mix(in srgb,var(--h-pri) 7%,transparent)}
/* hero: two columns when there is room; compact on phones */
.ds-hero{grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vw,24px);padding:clamp(18px,1.6vw + 12px,36px)}
.ds-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 75%);mask-image:linear-gradient(110deg,transparent 30%,#000 75%)}
.ds-hero h1{max-width:18ch}
.ds-hero .dz3-chips{margin:0 0 14px}.ds-hero .dz3-chip{display:inline-flex;align-items:center;gap:6px}
.ds-hact{display:flex;flex-wrap:wrap;gap:8px}
.data3 .ds-hero .btn.ds-hbtn{background:#fff;color:var(--h-deep,#2b2170);margin:0;min-height:46px;padding:0 18px;box-shadow:0 6px 18px rgba(20,14,70,.22)}
.data3 .ds-hero .btn.ds-hbtn2{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);margin:0;min-height:46px}
.ds-art{display:none;pointer-events:none;min-height:0}
.ds-art svg{display:block;max-height:220px}
.ds-grid line{stroke:rgba(255,255,255,.18);stroke-width:1}
.ds-line{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0}
.ds-pt{fill:#fff;stroke:rgba(255,255,255,.4);stroke-width:6;paint-order:stroke}
@container main (min-width:760px){.ds-hero{grid-template-columns:minmax(0,1.25fr) minmax(220px,.9fr);align-items:center}.ds-art{display:block}}
:root:not([data-motion="off"]) .ds-line{animation:dsdraw 1.4s var(--ds-ease) .15s both}
:root:not([data-motion="off"]) .ds-pt{animation:dspt .5s var(--ds-ease) both;animation-delay:calc(.35s + var(--d) * 110ms)}
:root[data-motion="subtle"] .ds-line,:root[data-motion="subtle"] .ds-pt{animation-duration:.01s;animation-delay:0s}
@keyframes dsdraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
@keyframes dspt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ds-pt{transform-box:fill-box;transform-origin:center}

/* overview dashboard: live counts, each a real jump link */
.ds-ov{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 var(--h-gap)}
@container main (min-width:900px){.ds-ov{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container main (max-width:340px){.ds-ov{grid-template-columns:minmax(0,1fr)}}
.ds-m{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic v" "l l" "s s";align-items:center;column-gap:10px;row-gap:2px;text-align:left;margin:0;padding:14px 16px;border-radius:18px;border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-ink);box-shadow:var(--h-e1);cursor:pointer;font:inherit;min-height:0;transition:transform .18s var(--ds-ease),box-shadow .18s var(--ds-ease),border-color .18s}
.ds-m::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--h-grad);opacity:.85}
.ds-m:hover{transform:translateY(-2px);box-shadow:var(--h-e2);border-color:color-mix(in srgb,var(--h-pri) 35%,var(--h-line))}
.ds-mic{grid-area:ic;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--h-pri) 12%,var(--h-surface));color:var(--h-pri)}
.ds-mv{grid-area:v;font-size:clamp(1.45rem,1vw + 1.1rem,1.9rem);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ds-ml{grid-area:l;font-weight:700;font-size:.92rem;margin-top:6px}
.ds-ms{grid-area:s;color:var(--h-mut);font-size:.8rem;line-height:1.35}
.ds-m.ok .ds-mic{background:var(--h-ok-bg);color:var(--h-ok)}.ds-m.warn .ds-mic{background:var(--h-warn-bg);color:var(--h-warn)}

/* section headers: icon tile, title, subtitle, faint coordinate grid behind (decoration only) */
.ds-sh{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--h-line)}
.ds-sh::after{content:"";position:absolute;right:0;top:-6px;width:min(220px,40%);height:calc(100% + 6px);pointer-events:none;background-image:linear-gradient(var(--ds-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ds-grid) 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.ds-sh>div{min-width:0;position:relative;z-index:1}
.ds-shic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--h-grad);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--h-pri) 28%,transparent)}
.data3 .ds-sh h2{margin:0;font-size:clamp(1.12rem,.5vw + 1rem,1.4rem);letter-spacing:-.01em}
.ds-sub{margin:3px 0 0;color:var(--h-mut);font-size:.9rem;max-width:70ch}
.data3 .card.ds-card{border-radius:20px}

/* measurements table: calm desktop grid */
.data3 .ds-card .datatab tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--h-pri) 3%,var(--h-surface))}
.data3 .ds-card .datatab tbody tr:nth-child(even) td:first-child{background:color-mix(in srgb,var(--h-pri) 3%,var(--h-surface))}
.data3 .datatab td.ds-num input{text-align:right}
.data3 .datatab td input{border-radius:10px;transition:border-color .15s,box-shadow .15s}
.data3 .datatab td input:focus{border-color:var(--h-pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--h-pri) 22%,transparent)}
.data3 .datatab thead th{font-weight:700;letter-spacing:.01em}
.data3 .da3-x{color:var(--h-mut)}.data3 .da3-x:hover{color:var(--h-bad);background:var(--h-bad-bg)}
.ds-tbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.data3 .ds-tbar .btn{display:inline-flex;align-items:center;gap:6px}
.data3 .btn.ds-danger:not(:disabled){color:var(--h-bad)}.data3 .btn.ds-danger:not(:disabled):hover{background:var(--h-bad-bg)}
.ds-cnt{margin-left:auto}
/* phones: each condition becomes a card with labelled trial boxes (same inputs, so typing, saving and focus are unchanged) */
@container main (max-width:560px){
  .data3 .da3-tbl{border:0;overflow:visible;margin-top:10px}
  .data3 .datatab,.data3 .datatab tbody{display:block;min-width:0}
  .data3 .datatab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .data3 .datatab tr{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;padding:12px;margin:0 0 10px;border:1px solid var(--h-line);border-radius:16px;background:var(--h-surface);box-shadow:var(--h-e1)}
  .data3 .datatab td,.data3 .ds-card .datatab tbody tr:nth-child(even) td,.data3 .datatab td:first-child{display:block;padding:0;border:0;background:none;position:static;white-space:normal}
  .data3 .ds-card .datatab tbody tr td.ds-cond{grid-column:1 / -1;padding-right:54px}
  .data3 .datatab td.ds-cond input{min-width:0;font-weight:700}
  .data3 .ds-card .datatab tbody tr td.ds-rm{position:absolute;top:12px;right:12px}
  .data3 .datatab td.ds-rm .btn{margin:0;min-height:44px;min-width:44px}
  .data3 .datatab td.ds-num::before{content:attr(data-l);display:block;font-size:.78rem;font-weight:700;color:var(--h-mut);margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .data3 .datatab td.ds-num input{min-width:0;text-align:left}
  .ds-cnt{margin-left:0;flex-basis:100%}
}
@container main (max-width:560px) and (min-width:400px){.data3 .datatab tr{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* graph studio */
.ds-types{margin:0 0 10px}
.data3 .g3card{border-radius:18px}
.ds-gtop{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin:4px 0 8px}
.ds-gtop .g3head{flex:1 1 18rem;min-width:0;margin:0}
.ds-gk{margin:0 0 2px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--h-pri-ink,var(--h-pri))}
.ds-gtools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;position:relative}
.ds-gbar{display:contents}
.data3 .ds-gtools .btn{margin:0;display:inline-flex;align-items:center;gap:5px;min-height:38px}
.ds-dl{display:inline-flex;gap:0}.data3 .ds-dl .btn:first-child{border-radius:10px 0 0 10px}.data3 .ds-dl .btn:last-child{border-radius:0 10px 10px 0;border-left:1px solid var(--h-line)}
/* Customize = a popover under its button (closes with Escape or a click elsewhere) */
.ds-gtools .g3set{position:static;margin:0;border:0;background:none}
.ds-gtools .g3set>summary.btn{min-height:38px;padding:0 12px;border-radius:10px;font-size:.88rem;color:var(--h-ink)}
.ds-gtools .g3set>summary::after{width:6px;height:6px;margin-left:4px}
.ds-gtools .g3set[open]>summary{background:color-mix(in srgb,var(--h-pri) 14%,var(--h-surface2));color:var(--h-pri-ink,var(--h-pri))}
.ds-gtools .g3set-b{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:min(25rem,calc(100cqw - 8px));max-width:calc(100vw - 40px);padding:14px;border:1px solid var(--h-line);border-radius:16px;background:var(--h-surface);box-shadow:var(--h-e3)}
@container main (min-width:700px){.ds-gtools .g3set-b{left:auto;right:0}}
.g3plot{border-radius:14px}
.data3 .g3card>div>.g3plot,.data3 .g3slot .g3plot{background-color:var(--h-surface);background-image:linear-gradient(180deg,color-mix(in srgb,var(--h-pri) 4%,transparent),transparent 60%)}
.data3 .g3dot,.data3 .g3avg,.data3 .g3bar{transition:opacity .25s,r .2s}

/* results + insights */
.data3 .r3c{border-radius:18px;transition:box-shadow .18s var(--ds-ease),transform .18s var(--ds-ease)}
.data3 .r3c:hover{box-shadow:var(--h-e2)}
.ds-insg{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:820px){.ds-insg{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-insg .ds-ai{grid-column:1 / -1}}
.ds-ic{position:relative;min-width:0;padding:16px 18px;border-radius:18px;border:1px solid var(--h-line);background:var(--h-surface2)}
.ds-ic h3{margin:4px 0 8px;font-size:1.02rem}
.ds-ic .modelbox{margin:0;padding:0;border:0;background:none}
.ds-ic .modelbox h3{margin-top:4px}
.ds-ick{margin:0}
.ds-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.02em}
.ds-tag.t-calc{background:var(--h-ok-bg);color:var(--h-ok)}
.ds-tag.t-you{background:color-mix(in srgb,var(--h-blue) 14%,var(--h-surface));color:var(--h-ink)}
.ds-tag.t-ai{background:color-mix(in srgb,var(--h-pri) 16%,var(--h-surface));color:var(--h-pri-ink,var(--h-pri))}
.ds-ins p{position:relative;margin:0 0 8px;padding-left:16px;line-height:1.5}
.ds-ins p::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--h-grad)}
.ds-ai{background:linear-gradient(160deg,color-mix(in srgb,var(--h-pri) 9%,var(--h-surface)),var(--h-surface));border-color:color-mix(in srgb,var(--h-pri) 25%,var(--h-line))}
.ds-ai .btn{margin:6px 0 0}
.ds-ai #out:not(:empty){margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--h-surface);border:1px solid var(--h-line);line-height:1.55}

/* scroll reveal (same rules as Discover: Full = 14px rise, Subtle = quick fade, Off/reduced = none) */
.d3-anim .data3 .d3rv:not(.in){opacity:0;transform:translateY(14px)}
.d3-anim .data3 .d3rv{transition:opacity .6s var(--ds-ease),transform .6s var(--ds-ease),box-shadow .18s,border-color .18s}
.d3-anim .data3 .d3rv.in{transition-delay:calc(min(var(--i,0),4) * 60ms),calc(min(var(--i,0),4) * 60ms),0s,0s}
:root[data-motion="subtle"] .data3 .d3rv:not(.in){transform:none}
:root[data-motion="subtle"] .data3 .d3rv{transition-duration:.22s;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.data3 .ds-line,.data3 .ds-pt{animation:none!important}.d3-anim .data3 .d3rv:not(.in){opacity:1;transform:none}.data3 .ds-m,.data3 .r3c{transition:none}}
:root[data-motion="off"] .data3 .ds-line,:root[data-motion="off"] .data3 .ds-pt{animation:none}