/* Scoped picture language for the energy button and mission cards. */
svg[data-picture-art]{stroke:none;fill:none}
.energy.picture-energy{display:flex;align-items:center;gap:8px;min-height:64px;max-width:230px;padding:4px 10px 4px 4px;border:1px solid #d0d9bd;border-radius:36px 14px 14px 36px;background:#fffbee;color:#688b52;box-shadow:0 3px 12px #2c493518;text-align:left;white-space:normal;cursor:pointer}
.energy.picture-energy[data-level="medium"]{color:#b18a3f;background:#fff9e7;border-color:#e3d1a2}
.energy.picture-energy[data-level="low"]{color:#b57a53;background:#fff5e5;border-color:#dec2a5}
.energy.picture-energy:hover{background:#f6f7e8;box-shadow:0 3px 14px #2c493528}
.energy.picture-energy:focus-visible{outline:3px solid #597f4b;outline-offset:4px}
.energy.picture-energy>.picture-energy-disc{display:block;flex:0 0 58px;width:58px;height:58px}
.energy.picture-energy .picture-energy-disc>svg{display:block;width:100%;height:100%;margin:0;color:inherit}
.energy.picture-energy [data-energy-fill]{fill:#7a995e}
.energy.picture-energy[data-level="medium"] [data-energy-fill]{fill:#bf9444}
.energy.picture-energy[data-level="low"] [data-energy-fill]{fill:#c2815c}
.picture-energy-disc>svg,.picture-goal-art>svg,.picture-unit>svg{stroke:none;fill:none}
.energy.picture-energy>.picture-energy-copy{display:flex!important;flex-direction:column;gap:3px;min-width:0;color:#40543b;letter-spacing:0}
.picture-energy-copy small{font-size:9px;font-weight:700;line-height:1.1;letter-spacing:1.4px;color:#758164}
.picture-energy-copy strong{display:block;max-width:110px;font-size:14px;line-height:1.1;font-weight:700}
.energy.picture-energy>.picture-energy-hear{display:grid;place-items:center;flex:0 0 18px;color:#718264;margin-left:1px}
.picture-energy-hear>svg{width:18px;height:18px}
.picture-mission{margin:18px 0 20px;color:#354c36}
.picture-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.picture-goal{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:8px;min-width:0;padding:13px 12px 12px;background:#f0f2e3;border:1px solid #d5dec3;border-radius:15px;text-align:center}
.picture-goal.is-complete{background:#e6edd9;border-color:#b7c99e}
.picture-goal.is-ready[data-goal="home"]{background:#fff2cc;border-color:#d5bb75}
.picture-goal-art{position:relative;width:110px;max-width:100%;height:92px}
.picture-goal-art>svg{display:block;width:100%;height:100%}
.picture-goal-copy{display:flex;flex-direction:column;gap:4px;align-self:start;width:100%;min-width:0}
.picture-goal-copy>strong{font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.2px;color:#354c36}
.picture-goal-copy>span{font-size:13px;line-height:1.3;color:#6c795e;overflow-wrap:anywhere}
.picture-goal-progress{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:25px;padding:3px 9px;border-radius:16px;background:#fffbee;color:#7a8169;font-size:12px;line-height:1.2;font-weight:600}
.picture-goal-progress.is-checked{background:#67884d;color:#fffbe9}
.picture-goal-progress>svg{width:16px;height:16px}
.picture-units{display:flex;justify-content:center;align-content:center;flex-wrap:wrap;gap:2px;width:100%;min-height:92px;max-width:264px}
.picture-unit{position:relative;display:block;width:calc(25% - 2px);min-width:42px;max-width:62px;height:58px}
.picture-unit>svg{display:block;width:100%;height:100%}
.picture-units:has(.picture-unit:nth-child(1):last-child) .picture-unit{width:100px;max-width:100px;height:90px}
.picture-units:has(.picture-unit:nth-child(2):last-child) .picture-unit{width:calc(50% - 2px);max-width:98px;height:88px}
.picture-units:has(.picture-unit:nth-child(3):last-child) .picture-unit{width:calc(33.333% - 2px);max-width:78px;height:80px}
.picture-unit-check{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:20px;height:20px;border:2px solid #f2f3e5;border-radius:50%;background:#6c8a50;color:#fffbee}
.picture-unit-check>svg{width:14px;height:14px}
.picture-stop-number{position:absolute;right:0;top:0;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#668b61;color:#fff8df;border:2px solid #fff9e4;font-size:17px;line-height:1}
.picture-large-count{position:absolute;right:-14px;bottom:0;padding:4px 7px;border-radius:8px;background:#fff5d9;border:1px solid #d5c48f;color:#617849;font-size:18px}
.picture-mission--compact{margin:8px 0 0}
.picture-mission--compact .picture-goals{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 1px 6px;scrollbar-width:thin;scrollbar-color:#a8b995 transparent}
.picture-mission--compact .picture-goal{flex:0 0 98px;gap:4px;padding:7px 5px;border-radius:10px}
.picture-mission--compact .picture-goal-art{width:67px;height:56px}
.picture-mission--compact .picture-goal-copy>strong{font-size:11px;line-height:1.2}
.picture-mission--compact .picture-goal-copy>span{font-size:10px;line-height:1.15}
.picture-mission--compact .picture-goal-progress{min-height:19px;padding:2px 5px;font-size:10px}
.picture-mission--compact .picture-units{min-height:56px;gap:0;align-content:center}
.picture-mission--compact .picture-unit{min-width:0!important;width:25%!important;height:30px!important}
.picture-mission--compact .picture-units:has(.picture-unit:nth-child(2):last-child) .picture-unit{width:50%!important;height:50px!important}
.picture-mission--compact .picture-unit-check{width:12px;height:12px;border-width:1px}
.picture-mission--compact .picture-unit-check>svg{width:9px;height:9px}
@media(max-width:600px){.energy.picture-energy{max-width:170px;min-height:53px;padding:3px 7px 3px 2px;gap:5px;border-radius:28px 12px 12px 28px}.energy.picture-energy>.picture-energy-disc{flex-basis:47px;width:47px;height:47px}.picture-energy-copy strong{max-width:79px;font-size:12px}.picture-energy-copy small{font-size:8px;letter-spacing:1px}.energy.picture-energy>.picture-energy-hear{flex-basis:15px}.picture-energy-hear>svg{width:15px;height:15px}.picture-goals{gap:9px}.picture-goal{padding:10px 7px;gap:7px;border-radius:12px}.picture-goal-copy>strong{font-size:16px}.picture-goal-copy>span{font-size:12px}.picture-goal-art{width:103px;height:86px}.picture-unit{min-width:0;height:47px}.picture-units{min-height:86px}.picture-units:has(.picture-unit:nth-child(2):last-child) .picture-unit{height:74px}.picture-units:has(.picture-unit:nth-child(3):last-child) .picture-unit{height:59px}}
@media(max-width:360px){.energy.picture-energy{max-width:151px;gap:4px}.energy.picture-energy>.picture-energy-disc{flex-basis:42px;width:42px;height:42px}.picture-energy-copy strong{font-size:11px;max-width:70px}.energy.picture-energy>.picture-energy-hear{display:none}.picture-goals{gap:7px}.picture-goal-copy>strong{font-size:15px}.picture-goal-copy>span{font-size:11px}}
/* The phone HUD keeps the same energy picture in compact and expanded missions. */
@media(max-width:600px){
  .top-hud>.status-column #energy-status.picture-energy{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:65px;max-width:65px;min-height:68px;padding:4px;gap:2px;border-radius:14px}
  .top-hud>.status-column #energy-status.picture-energy>.picture-energy-disc{display:block;width:34px;height:34px;flex:0 0 34px}
  .top-hud>.status-column #energy-status.picture-energy>.picture-energy-copy{display:flex!important;align-items:center;width:57px;text-align:center;gap:0}
  .top-hud>.status-column #energy-status.picture-energy .picture-energy-copy small{display:none}
  .top-hud>.status-column #energy-status.picture-energy .picture-energy-copy strong{display:flex;align-items:center;justify-content:center;max-width:57px;min-height:24px;font-size:11px;line-height:1.08}
  .top-hud>.status-column #energy-status.picture-energy>.picture-energy-hear{position:absolute;display:block;top:4px;right:3px;width:11px;height:11px;margin:0;opacity:.8}
  .top-hud>.status-column #energy-status.picture-energy .picture-energy-hear>svg{width:11px;height:11px}
}
@media(prefers-reduced-motion:reduce){.energy.picture-energy,.picture-goal{transition:none}}

@media(max-height:560px) and (orientation:landscape){
  .top-hud>.status-column #energy-status.picture-energy{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:94px;height:94px;padding:4px;gap:2px;border-radius:14px}
  .top-hud>.status-column #energy-status.picture-energy>.picture-energy-disc{width:47px;height:47px;flex:0 0 47px}
  .top-hud>.status-column #energy-status.picture-energy>.picture-energy-copy{align-items:center;text-align:center;gap:0}
  .top-hud>.status-column #energy-status.picture-energy .picture-energy-copy small{display:none}
  .top-hud>.status-column #energy-status.picture-energy .picture-energy-copy strong{font-size:11px;max-width:72px}
  .top-hud>.status-column #energy-status.picture-energy>.picture-energy-hear{display:none}
}