/* Illustrations (js/art.js): modern flat colours with soft gradients, following the theme. Decorative only. */
:root{
  --art-ink:#1B4F8A; --art-mid:#5F8FC4; --art-warm:#F2B441; --art-warm-hi:#F8CD6E; --art-warm-dk:#D99A2B;
  --art-far-top:#EEF3FA; --art-far:#E2EBF5; --art-near-top:#D8E4F2; --art-near:#C9D9EC;
  --art-tank:#A9C3E3; --art-tank-hi:#CFDDEF; --art-tank-lo:#7C9FCB; --art-pole:#B4C1D1;
  --art-tree:#8DB89A; --art-tree-2:#A7C9AF; --art-trunk:#7A8F80; --art-moon:#C3D2E6; --art-bird:#8A9BB0;
  --art-bg-hi:#F1F6FC; --art-bg:#E0EAF6; --art-paper:#FFFFFF; --art-paper-2:#EEF3F9; --art-line-soft:#C9D6E6;
  --art-shadow:#1B3557; --art-metal:#B7C2CF; --art-eraser:#E8918F; --art-wood:#F1D7AE; --art-ok:#2F8A55; --art-ok-hi:#5DBB82}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --art-ink:#9DBFE8; --art-mid:#6F95C4; --art-warm:#E9B04A; --art-warm-hi:#F2C66E; --art-warm-dk:#C98F33;
  --art-far-top:#1A2430; --art-far:#18212C; --art-near-top:#223040; --art-near:#1D2938;
  --art-tank:#3E5D80; --art-tank-hi:#527399; --art-tank-lo:#2E4762; --art-pole:#4C5B6C;
  --art-tree:#4F7A5C; --art-tree-2:#5E8A6A; --art-trunk:#56685B; --art-moon:#D3DEEC; --art-bird:#6C7B8D;
  --art-bg-hi:#223142; --art-bg:#18222E; --art-paper:#2A3747; --art-paper-2:#223040; --art-line-soft:#3F5063;
  --art-shadow:#000000; --art-metal:#8C99A8; --art-eraser:#C9726F; --art-wood:#D9BE93; --art-ok:#2E7D4F; --art-ok-hi:#4CAF74}}
:root[data-theme="dark"]{
  --art-ink:#9DBFE8; --art-mid:#6F95C4; --art-warm:#E9B04A; --art-warm-hi:#F2C66E; --art-warm-dk:#C98F33;
  --art-far-top:#1A2430; --art-far:#18212C; --art-near-top:#223040; --art-near:#1D2938;
  --art-tank:#3E5D80; --art-tank-hi:#527399; --art-tank-lo:#2E4762; --art-pole:#4C5B6C;
  --art-tree:#4F7A5C; --art-tree-2:#5E8A6A; --art-trunk:#56685B; --art-moon:#D3DEEC; --art-bird:#6C7B8D;
  --art-bg-hi:#223142; --art-bg:#18222E; --art-paper:#2A3747; --art-paper-2:#223040; --art-line-soft:#3F5063;
  --art-shadow:#000000; --art-metal:#8C99A8; --art-eraser:#C9726F; --art-wood:#D9BE93; --art-ok:#2E7D4F; --art-ok-hi:#4CAF74}

.art svg{display:block;width:100%;height:auto}

/* Dashboard greeting: an oilfield horizon under the text, sun by day and moon at night. */
.hello{display:flex;flex-direction:column}
.hello .art{margin-top:auto;padding-top:14px;max-width:520px}
.hello .art .moon,.hello.night .art .sun{display:none}
.hello.night .art .moon{display:inline}

/* Empty states: a small spot drawing above the message. */
.empty .art,.ch-empty .art{width:128px;margin:0 auto 8px}
.ok-empty .art{width:56px;flex:none}
.ch-empty .ill.art{width:150px;height:auto;background:none;border-radius:0;margin-bottom:0}
.ch-empty .ill.art::after{content:none}
.ch-empty .ill.art svg{width:100%;height:auto}

@media (max-width:640px), (max-height:500px){.hello .art{display:none}}

/* Scroll-in: cards fade and rise into place (js/motion.js) */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* Dashboard scene in motion (simple CSS on the drawing): the pump jack pumps, clouds drift, the sun's glow
   breathes, and the layers shift at different speeds as you scroll (--py, set by js/motion.js). */
.hello .art svg :is(.pj-beam,.pj-crank,.pj-pitman,.pj-rod,.cloud,.glow,.birds,.l-far,.l-poles,.sky){transform-box:view-box}
.hello .art .pj-beam{transform-origin:151px 68px;animation:pj-rock 2.75s ease-in-out infinite alternate}
.hello .art .pj-rod{animation:pj-rod 2.75s ease-in-out infinite alternate}
.hello .art .pj-pitman{transform-origin:206px 104px;animation:pj-pit 2.75s ease-in-out infinite alternate}
.hello .art .pj-crank{transform-origin:206px 104px;animation:pj-spin 5.5s linear infinite}
@keyframes pj-rock{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes pj-rod{from{transform:translateY(5.5px)}to{transform:translateY(-5.5px)}}
@keyframes pj-pit{from{transform:scaleY(1.13)}to{transform:scaleY(.87)}}
@keyframes pj-spin{to{transform:rotate(360deg)}}
.hello .art .cloud{fill:var(--art-cloud);opacity:.85}
.hello .art .c1{animation:cloud 80s linear infinite;animation-delay:-30s}
.hello .art .c2{animation:cloud 110s linear infinite;animation-delay:-75s}
@keyframes cloud{from{transform:translateX(-40px)}to{transform:translateX(600px)}}
.hello .art .glow{transform-origin:478px 38px;animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{from{transform:scale(.9);opacity:.75}to{transform:scale(1.08);opacity:1}}
.hello .art .birds{animation:birds 9s ease-in-out infinite alternate}
@keyframes birds{from{transform:translate(0,0)}to{transform:translate(-14px,-4px)}}
.hello .art .sky{transform:translateY(calc(var(--py,0) * 14px))}
.hello .art .l-far{transform:translateY(calc(var(--py,0) * 7px))}
.hello .art .l-poles{transform:translateY(calc(var(--py,0) * 4px))}
:root{--art-cloud:#FFFFFF}
:root[data-theme="dark"]{--art-cloud:#2A3646}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--art-cloud:#2A3646}}
@media (prefers-reduced-motion:reduce){.hello .art *{animation:none!important}.hello .art .sky,.hello .art .l-far,.hello .art .l-poles{transform:none}}