/* Visual grounds. The site ships on data-bg="neutral" (warm neutral, chosen Oct 19). Other themes kept for reference. Each sets the ground behind visuals (--vis) and whether it is dark (--vis-ink for captions/controls inside). */
html[data-bg="deepsea"]      { --vis: linear-gradient(160deg, #0F1A2B 0%, #1E2A40 45%, #46597A 100%); --vis-dark: 1; }
html[data-bg="crimson"]      { --vis: linear-gradient(160deg, #220E08 0%, #34090F 50%, #5C1A1B 100%); --vis-dark: 1; }
html[data-bg="crimson-soft"] { --vis: #EBD3D0; }
html[data-bg="sunset"]       { --vis: linear-gradient(160deg, #F0C8A4 0%, #F3DCC4 55%, #EFEBD8 100%); }
html[data-bg="neutral"]      { --vis: #ECE6DA; }
html[data-bg="lavender"]     { --vis: #E4E0FA; }

/* Homepage frames */
html[data-bg]:not([data-bg="default"]) .bleed .fig-frame,
html[data-bg]:not([data-bg="default"]) .half .fig-frame { background: var(--vis); }
/* Case page bands */
html[data-bg]:not([data-bg="default"]) body.case { --band: var(--vis); }

/* Dark grounds: lighten controls, labels and captions that sit on the band */
html[data-bg="deepsea"], html[data-bg="crimson"] { --on-vis: rgba(255,255,255,.78); }
html[data-bg="deepsea"] .strip-ctl button, html[data-bg="crimson"] .strip-ctl button,
html[data-bg="deepsea"] .lane-btn, html[data-bg="crimson"] .lane-btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
html[data-bg="deepsea"] .strip-track, html[data-bg="crimson"] .strip-track { background: rgba(255,255,255,.18); }
html[data-bg="deepsea"] .strip-track i, html[data-bg="crimson"] .strip-track i { background: #fff; }
html[data-bg="deepsea"] body.case .lane figcaption, html[data-bg="crimson"] body.case .lane figcaption,
html[data-bg="deepsea"] body.case .lane-head, html[data-bg="crimson"] body.case .lane-head,
html[data-bg="deepsea"] body.case .screen-pair figcaption, html[data-bg="crimson"] body.case .screen-pair figcaption,
html[data-bg="deepsea"] body.case .fig-grid figcaption, html[data-bg="crimson"] body.case .fig-grid figcaption { color: var(--on-vis); }
html[data-bg="deepsea"] body.case .lane .step, html[data-bg="crimson"] body.case .lane .step { color: #fff; }
html[data-bg="deepsea"] body.case .result-panel, html[data-bg="crimson"] body.case .result-panel,
html[data-bg="deepsea"] body.case .demo, html[data-bg="crimson"] body.case .demo,
html[data-bg="deepsea"] body.case .live-embed, html[data-bg="crimson"] body.case .live-embed { --band: var(--pen-pale); }


/* Light grounds on case pages: soft shadows only */
html[data-bg="neutral"] .screen-phone, html[data-bg="neutral"] .screen-browser, html[data-bg="sunset"] .screen-phone, html[data-bg="sunset"] .screen-browser { box-shadow: 0 1px 2px rgba(18,26,44,.08), 0 18px 36px -22px rgba(18,26,44,.28); }