/* Optional, finite motion for the public examples. Every explanation is readable without it. */
.atlas-pin { width: 44px; height: 44px; padding: 0; z-index: 2; cursor: pointer; background: transparent; border: 0; box-shadow: none; }
.atlas-pin > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #718270; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px #f4f3ed90; transition: background .2s, box-shadow .2s; }
.industrial-atlas .atlas-pin { transform: translate(-6px, -6px); }
.industrial-atlas .atlas-pin[aria-pressed=true] { background: transparent; }
.atlas-pin[aria-pressed=true] > span { background: var(--citron); box-shadow: 0 0 0 5px #d7ee8a55, 0 0 0 10px #d7ee8a20; }
.atlas-pin:hover > span { background: var(--citron); box-shadow: 0 0 0 7px #d7ee8a65; }
.atlas-pin:focus-visible { outline-offset: 3px; border-radius: 50%; }
.atlas-figure img { transition: transform .65s cubic-bezier(.2,.65,.3,1); transform-origin: 48% 60%; }
@media (hover: hover) and (pointer: fine) {
  .atlas-figure:hover img, .atlas-figure:focus-within img { transform: translateY(-3px) scale(1.015); }
}
[data-enhanced=true] > [data-view-panel]:not([hidden]) { animation: explanation-enter .24s ease-out; }
@keyframes explanation-enter { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.workflow-map { grid-column: 1/-1; margin-top: 13px; border-block: 1px solid var(--line); padding: 16px 0 31px; }
.workflow-map-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.workflow-map-heading > span { color: var(--muted); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.workflow-map-heading button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border: 0; padding: 8px 0 8px 12px; color: var(--green); background: transparent; font-size: 12px; cursor: pointer; }
.workflow-map-heading button > span { font-size: 20px; }
.workflow-map-heading button:hover { text-decoration: underline; text-underline-offset: 4px; }
.workflow-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; list-style: none; padding: 0; margin: 16px 0 0; position: relative; }
.workflow-stages::before, .workflow-stages::after { content: ''; position: absolute; left: 0; right: 0; top: 45px; height: 1px; background: var(--line); pointer-events: none; }
.workflow-stages::after { background: var(--green); transform: scaleX(0); transform-origin: left; }
.workflow-stage { position: relative; z-index: 1; }
.workflow-drawing { display: flex; align-items: center; justify-content: space-between; height: 91px; }
.workflow-node { display: grid; place-items: center; width: 32px; height: 32px; font-size: 10px; background: var(--paper); border: 1px solid #8d9c80; border-radius: 50%; }
.workflow-drawing svg { width: 108px; height: 72px; background: var(--paper); stroke: #6d8066; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.workflow-accent { stroke: var(--green); stroke-width: 1.8; }
.workflow-stage strong { display: block; font-weight: 500; font-size: 23px; letter-spacing: -.03em; line-height: 1.3; margin-top: 8px; }
.workflow-stage p { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 7px; }
[data-workflow-state=playing] .workflow-stages::after { animation: workflow-path 2.8s cubic-bezier(.25,.5,.3,1) both; }
[data-workflow-state=playing] .workflow-node { animation: workflow-node 1s ease-out both; }
[data-workflow-state=playing] .workflow-stage:nth-child(2) .workflow-node { animation-delay: .8s; }
[data-workflow-state=playing] .workflow-stage:nth-child(3) .workflow-node { animation-delay: 1.6s; }
[data-workflow-state=playing] .workflow-drawing svg { animation: workflow-drawing 1s ease-out both; }
[data-workflow-state=playing] .workflow-stage:nth-child(2) svg { animation-delay: .8s; }
[data-workflow-state=playing] .workflow-stage:nth-child(3) svg { animation-delay: 1.6s; }
[data-workflow-state=complete] .workflow-stages::after { transform: scaleX(1); }
[data-workflow-state=complete] .workflow-node { background: var(--citron); border-color: var(--green); }
@keyframes workflow-path { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes workflow-node { 0% { background: var(--paper); box-shadow: 0 0 0 0 #d7ee8a70; } 50% { background: var(--citron); box-shadow: 0 0 0 8px #d7ee8a40; } 100% { background: var(--citron); border-color: var(--green); box-shadow: 0 0 0 0 #d7ee8a00; } }
@keyframes workflow-drawing { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

.plan-bar { display: flex; width: 100%; height: 12px; background: #b7ce79; margin-top: 17px; overflow: hidden; border-radius: 1px; }
.plan-bar > span { display: block; height: 100%; flex: 0 0 auto; transition: width .45s cubic-bezier(.2,.65,.3,1); }
[data-plan-segment=efficiency], .plan-key-efficiency { background: var(--forest); }
[data-plan-segment=equipment], .plan-key-equipment { background: repeating-linear-gradient(125deg, #577331 0 4px, #95ae60 4px 6px); }
.plan-scale { display: block; color: #46582f; font-size: 10px; line-height: 1.6; margin-top: 7px; }
.investment-totals .plan-legend { display: flex; flex-wrap: wrap; gap: 9px 18px; }
.investment-totals .plan-legend > span { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; }
.plan-legend i { display: inline-block; width: 13px; height: 9px; }
.investment-totals strong { font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .workflow-stages { gap: 25px; }.workflow-stage strong { font-size: 20px; }.workflow-stage p { font-size: 11px; }
  .workflow-drawing svg { width: 96px; }
}
@media (max-width: 650px) {
  .atlas-pin > span { width: 27px; height: 27px; }
  .industrial-atlas .atlas-pin { width: 44px; height: 44px; transform: translate(-8.5px, -8.5px); }
  .workflow-map { margin-top: 0; padding-bottom: 23px; }
  .workflow-map-heading { gap: 8px; }.workflow-map-heading > span { font-size: 8px; }.workflow-map-heading button { font-size: 11px; gap: 5px; }
  .workflow-stages { grid-template-columns: 1fr; gap: 24px; margin-top: 18px; }
  .workflow-stage { padding-left: 50px; min-height: 85px; }
  .workflow-drawing { height: auto; }.workflow-node { position: absolute; left: 0; top: 0; }
  .workflow-drawing svg { width: 68px; height: 46px; position: absolute; right: 0; top: 0; }
  .workflow-stage strong { font-size: 21px; max-width: calc(100% - 75px); margin-top: 3px; }
  .workflow-stage p { font-size: 12px; margin-top: 9px; max-width: 30ch; }
  .workflow-stages::before, .workflow-stages::after { left: 16px; top: 0; bottom: 0; right: auto; width: 1px; height: auto; }
  .workflow-stages::after { transform: scaleY(0); transform-origin: top; }
  [data-workflow-state=complete] .workflow-stages::after { transform: scaleY(1); }
  @keyframes workflow-path { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-figure img { transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .plan-bar, .plan-legend i { border: 1px solid CanvasText; }
  [data-plan-segment] { background: CanvasText; }
  [data-plan-segment=equipment], .plan-key-equipment { border-block: 3px solid CanvasText; background: Canvas; }
  .atlas-pin[aria-pressed=true] > span, .workflow-node { border: 2px solid Highlight; }
}