/* Leak Man on the pipe (GOVERNING DOCUMENTS/05 section 19). Loaded only when the ifl_dock_leakman option is on.
   The bar's top border becomes a pipe; Leak Man walks behind it (his legs are hidden by the bar) and finds the leaks that open in it. */

body.ifl-lm-on { --ifl-pipe-h: 14px; }
@media (max-width: 1279px) { body.ifl-lm-on { --ifl-pipe-h: 10px; } }

.ifl-dock.has-lm .ifl-dock__bar { border-top: 0; }
.ifl-dock__pipe { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; height: var(--ifl-pipe-h, 14px); box-sizing: border-box; border-top: 2px solid #26343B; border-bottom: 2px solid #26343B; background: #C6C9C8; box-shadow: inset 0 3px 0 #F1F3F2, inset 0 -3px 0 #9DA1A2; pointer-events: none; }
.ifl-dock__coupling { position: absolute; top: -5px; width: 30px; height: calc(100% + 10px); margin-left: -15px; box-sizing: border-box; border: 2px solid #26343B; border-radius: 3px; background: #C6C9C8; box-shadow: inset 0 4px 0 #F1F3F2, inset 0 -4px 0 #9DA1A2; }
.ifl-dock__coupling:nth-child(1) { left: 10%; }
.ifl-dock__coupling:nth-child(2) { left: 31%; }
.ifl-dock__coupling:nth-child(3) { left: 52%; }
.ifl-dock__coupling:nth-child(4) { left: 73%; }
.ifl-dock__coupling:nth-child(5) { left: 94%; }
@media (max-width: 1279px) {
  .ifl-dock__pipe { box-shadow: inset 0 2px 0 #F1F3F2, inset 0 -2px 0 #9DA1A2; }
  .ifl-dock__coupling { width: 22px; margin-left: -11px; box-shadow: inset 0 3px 0 #F1F3F2, inset 0 -3px 0 #9DA1A2; }
  .ifl-dock__coupling:nth-child(2), .ifl-dock__coupling:nth-child(3), .ifl-dock__coupling:nth-child(4), .ifl-dock__coupling:nth-child(5) { display: none; }
  .ifl-dock.has-lm .ifl-dock__tab { top: calc(-44px - var(--ifl-pipe-h, 10px)); }
  .ifl-dock.has-lm .ifl-dock__tab, .ifl-dock.has-lm .ifl-dock__tab:hover, .ifl-dock.has-lm .ifl-dock__tab:focus, .ifl-dock.has-lm .ifl-dock__tab:active { border: 2px solid #26343B !important; border-bottom: 0 !important; }
  body.afx-dock-smart:not(.afx-dock-on) .ifl-dock.has-lm:not(.is-open) { transform: translateY(calc(100% + 72px)); }
}
body.afx-dock-smart:not(.afx-dock-on) .ifl-dock.has-lm:not(.is-open) { transform: translateY(calc(100% + 72px)); }

/* Layers: Leak Man sits behind the bar and the pipe; leaks, marks and the close-up sit in front. */
.ifl-lm, .ifl-lm-fx { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; }
.ifl-lm { z-index: -1; }
.ifl-lm-fx { z-index: 2; }
.ifl-dock.is-lm-paused .ifl-lm, .ifl-dock.is-lm-paused .ifl-lm-fx { visibility: hidden; }
.ifl-dock.is-lm-off .ifl-lm, .ifl-dock.is-lm-off .ifl-lm-fx { display: none; }
.ifl-lm__man { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.ifl-lm__pose { position: absolute; display: none; }
.ifl-lm__pose.is-on { display: block; }
.ifl-lm img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ifl-lm__head { position: absolute; }
.ifl-lm__eye { position: absolute; border-radius: 50%; background: #111111; }
.ifl-dock button.ifl-lm__btn, .ifl-dock button.ifl-lm__btn:hover, .ifl-dock button.ifl-lm__btn:focus, .ifl-dock button.ifl-lm__btn:active { position: absolute; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 22px !important; background: transparent !important; box-shadow: none !important; cursor: grab; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ifl-dock button.ifl-lm__btn.is-drag { cursor: grabbing; }
.ifl-dock button.ifl-lm__btn:focus-visible { outline: 3px solid #FFD166; outline-offset: 2px; }

/* Leaks open in the pipe: a crack, spurting drops, a drip and a ring. The button ends at the pipe so it never covers the bar's buttons. */
.ifl-dock button.ifl-lm-leak, .ifl-dock button.ifl-lm-leak:hover, .ifl-dock button.ifl-lm-leak:focus, .ifl-dock button.ifl-lm-leak:active { position: absolute; bottom: 0; width: 52px; height: 52px; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='11' cy='11' r='7.5' fill='%23ffffff' fill-opacity='.45' stroke='%23D9622B' stroke-width='3'/%3E%3Cpath d='M16.5 16.5l8 8' stroke='%238E3B1E' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 11 11, pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.ifl-lm-leak > * { position: absolute; pointer-events: none; }
.ifl-lm-leak__ring { left: 12px; top: 31px; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid #1FA0D6; animation: ifl-lm-ring 1.6s ease-out infinite; }
.ifl-lm-leak__crack { left: 21px; top: 38px; width: 10px; height: 14px; fill: none; stroke: #1E2A30; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ifl-lm-drop { left: 23px; top: 33px; width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #1FA0D6; opacity: 0; }
.ifl-lm-drop--a { animation: ifl-lm-sa 1.1s ease-out infinite; }
.ifl-lm-drop--b { animation: ifl-lm-sb 1.1s ease-out .35s infinite; }
.ifl-lm-drop--c { animation: ifl-lm-sc 1.1s ease-out .7s infinite; }
.ifl-lm-drop--drip { top: 52px; animation: ifl-lm-drip 1.4s ease-in infinite; }
.ifl-lm-leak.is-big .ifl-lm-drop--a { animation-duration: .75s; }
.ifl-lm-leak.is-big .ifl-lm-drop--b { animation-duration: .7s; }
.ifl-lm-leak.is-big .ifl-lm-drop--c { animation-duration: .8s; }
.ifl-lm-leak.is-big .ifl-lm-drop { width: 9px; height: 11px; }

/* The flag and orange mark left on the pipe after a find; they fade after about seven seconds. */
.ifl-lm-mark { position: absolute; bottom: -1px; width: 40px; height: 50px; pointer-events: none; animation: ifl-lm-fade 9s linear forwards; }
.ifl-lm-mark span { position: absolute; display: block; }
.ifl-lm-mark__in { left: 0; top: 0; width: 40px; height: 50px; transform-origin: 20px 42px; animation: ifl-lm-plant .35s ease-out both; }
.ifl-lm-mark__pole { left: 19px; top: 2px; width: 3px; height: 36px; border-radius: 2px; background: #0B3954; }
.ifl-lm-mark__flag { left: 22px; top: 2px; width: 16px; height: 12px; background: #F28C28; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ifl-lm-mark__x { left: 12px; top: 40px; width: 17px; height: 4px; border-radius: 2px; background: #F28C28; transform: rotate(45deg); }
.ifl-lm-mark__x + .ifl-lm-mark__x { transform: rotate(-45deg); }

/* The close-up that opens above a leak while he looks at it. */
.ifl-lm-zoom { position: absolute; bottom: 48px; width: 84px; height: 84px; display: none; pointer-events: none; transform-origin: 42px 84px; }
.ifl-lm-zoom.is-on { display: block; animation: ifl-lm-pop .25s ease-out both; }
.ifl-lm-zoom__handle { position: absolute; left: 62px; top: 66px; width: 12px; height: 30px; box-sizing: border-box; border: 2px solid #1E2A30; border-radius: 6px; background: #8E3B1E; transform: rotate(-40deg); }
.ifl-lm-zoom.is-right .ifl-lm-zoom__handle { left: 10px; transform: rotate(40deg); }
.ifl-lm-zoom__lens { position: absolute; left: 0; top: 0; width: 84px; height: 84px; box-sizing: border-box; border-radius: 50%; border: 6px solid #D9622B; background: #E8F5FB; overflow: hidden; box-shadow: 0 0 0 2px #1E2A30, 0 8px 18px rgba(11, 57, 84, .25); }
.ifl-lm-zoom__pipe { position: absolute; left: -4px; top: 28px; width: 84px; height: 22px; box-sizing: border-box; border-top: 2px solid #1E2A30; border-bottom: 2px solid #1E2A30; background: #C6C9C8; box-shadow: inset 0 4px 0 #F1F3F2, inset 0 -4px 0 #9DA1A2; }
.ifl-lm-zoom__crack { position: absolute; left: 30px; top: 28px; width: 16px; height: 22px; fill: none; stroke: #1E2A30; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ifl-lm-zoom__drop { position: absolute; left: 31px; top: 50px; width: 12px; height: 16px; box-sizing: border-box; border: 2px solid #0B5E80; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #1FA0D6; animation: ifl-lm-bigdrip 1s ease-in infinite; }

/* The count after a find, shown for a few seconds at the left end of the pipe. */
.ifl-lm-tag { position: absolute; left: 12px; bottom: 0; display: none; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; box-sizing: border-box; border-radius: 999px; border: 2px solid #0B3954; background: #FFFFFF; color: #0B3954; font: 700 16px/1 Poppins, system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.ifl-lm-tag.is-on { display: flex; animation: ifl-lm-pop .2s ease-out both; }
.ifl-lm-tag svg { width: 16px; height: 16px; fill: none; stroke: #D9622B; stroke-width: 2.6; stroke-linecap: round; }

@media (max-width: 1279px) {
  .ifl-dock button.ifl-lm-leak, .ifl-dock button.ifl-lm-leak:hover, .ifl-dock button.ifl-lm-leak:focus, .ifl-dock button.ifl-lm-leak:active { width: 44px; height: 42px; }
  .ifl-lm-leak__ring { left: 10px; top: 25px; width: 24px; height: 24px; }
  .ifl-lm-leak__crack { left: 18px; top: 32px; width: 8px; height: 10px; }
  .ifl-lm-drop { left: 19px; top: 28px; width: 6px; height: 8px; }
  .ifl-lm-drop--drip { top: 42px; }
  .ifl-lm-mark { width: 32px; height: 40px; }
  .ifl-lm-mark__in { width: 32px; height: 40px; transform-origin: 16px 36px; }
  .ifl-lm-mark__pole { left: 15px; height: 30px; }
  .ifl-lm-mark__flag { left: 18px; width: 13px; height: 10px; }
  .ifl-lm-mark__x { left: 9px; top: 33px; width: 14px; height: 3px; }
  .ifl-lm-zoom { bottom: 42px; width: 64px; height: 64px; transform-origin: 32px 64px; }
  .ifl-lm-zoom__handle { left: 47px; top: 50px; width: 10px; height: 24px; border-radius: 5px; }
  .ifl-lm-zoom.is-right .ifl-lm-zoom__handle { left: 7px; }
  .ifl-lm-zoom__lens { width: 64px; height: 64px; border-width: 5px; }
  .ifl-lm-zoom__pipe { top: 21px; width: 64px; height: 17px; box-shadow: inset 0 3px 0 #F1F3F2, inset 0 -3px 0 #9DA1A2; }
  .ifl-lm-zoom__crack { left: 22px; top: 21px; width: 12px; height: 17px; }
  .ifl-lm-zoom__drop { left: 23px; top: 38px; width: 9px; height: 12px; }
  .ifl-lm-tag { left: 8px; height: 28px; padding: 0 10px 0 8px; gap: 5px; }
  .ifl-lm-tag svg { width: 14px; height: 14px; }
}

/* The Hide Leak Man tool matches the other panel tools. */
.ifl-dock button.ifl-dock__tool.ifl-dock__tool--lm, .ifl-dock button.ifl-dock__tool.ifl-dock__tool--lm:focus { display: flex; width: 100% !important; min-height: 46px; box-sizing: border-box; font-size: 16px !important; font-weight: 600 !important; border: 2px solid rgba(255, 255, 255, .3) !important; padding: 0 14px !important; color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; }
.ifl-dock button.ifl-dock__tool.ifl-dock__tool--lm:hover { border: 2px solid rgba(255, 255, 255, .3) !important; padding: 0 14px !important; color: #FFFFFF !important; background: rgba(255, 255, 255, .08) !important; }
@media (max-width: 1279px) {
  .ifl-dock .ifl-dock__col--tools .ifl-dock__tool--lm { grid-column: 1 / -1; justify-content: center; }
}

/* Where you sent him: an orange marker over the leak and a dotted trail along the pipe. Hovering a leak shows the same orange cue. */
.ifl-lm-leak__target { left: 18px; top: 4px; width: 16px; height: 12px; background: #F28C28; clip-path: polygon(0 0, 100% 0, 50% 100%); display: none; animation: ifl-lm-bob .7s ease-in-out infinite alternate; }
.ifl-lm-leak.is-target .ifl-lm-leak__target { display: block; }
.ifl-lm-leak.is-target .ifl-lm-leak__ring { border-color: #F28C28; border-width: 3px; }
@media (hover: hover) {
  .ifl-lm-leak:hover .ifl-lm-leak__ring { border-color: #F28C28; border-width: 3px; animation-duration: .9s; }
  .ifl-lm-leak:hover .ifl-lm-leak__target { display: block; opacity: .75; }
}
.ifl-lm-path { position: absolute; bottom: calc(var(--ifl-pipe-h, 14px) + 1px); height: 0; border-top: 3px dotted #F28C28; display: none; pointer-events: none; }
.ifl-lm-path.is-on { display: block; }

/* Spraying leaks: a wobbling jet with drops arcing off both sides. */
.ifl-lm-jet { left: 26px; bottom: 12px; width: 7px; height: 50px; margin-left: -3.5px; border-radius: 3px 3px 1px 1px; background: #7CCBEB; box-shadow: 0 0 0 1px rgba(11, 94, 128, .35); transform-origin: 50% 100%; animation: ifl-lm-jet .45s ease-in-out infinite alternate; }
.ifl-lm-jet--l, .ifl-lm-jet--r { width: 5px; height: 40px; margin-left: -2.5px; opacity: .85; }
.ifl-lm-jet--l { animation-name: ifl-lm-jetl; }
.ifl-lm-jet--r { animation-name: ifl-lm-jetr; animation-delay: .2s; }
.ifl-lm-sp { left: 22px; top: -12px; width: 9px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #1FA0D6; opacity: 0; animation: ifl-lm-spray .75s ease-out infinite; }
.ifl-lm-leak.is-spray .ifl-lm-leak__target { top: -24px; }
.ifl-lm-leak.is-fixed .ifl-lm-jet { animation: ifl-lm-jetoff .3s ease-in forwards; }
.ifl-lm-leak.is-fixed .ifl-lm-sp, .ifl-lm-leak.is-fixed .ifl-lm-drop, .ifl-lm-leak.is-fixed .ifl-lm-leak__ring, .ifl-lm-leak.is-fixed .ifl-lm-leak__target { display: none; }
.ifl-lm-leak.is-drying { transition: opacity .4s; opacity: 0; }
.ifl-lm-fling { position: absolute; width: 6px; height: 8px; margin: -4px 0 0 -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #1FA0D6; pointer-events: none; opacity: 0; animation: ifl-lm-fling .75s ease-out forwards; }

/* The shutoff valve at the right end of the pipe turns the game off and on. */
.ifl-dock button.ifl-lm-valve, .ifl-dock button.ifl-lm-valve:hover, .ifl-dock button.ifl-lm-valve:focus, .ifl-dock button.ifl-lm-valve:active { position: absolute; right: 12px; bottom: 100%; z-index: 3; width: 36px; height: 36px; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ifl-lm-valve svg { display: block; width: 32px; height: 32px; margin: 0 auto; overflow: visible; }
.ifl-lm-valve__stem { fill: #C6C9C8; stroke: #26343B; stroke-width: 2; }
.ifl-lm-valve__wheel { transform-box: fill-box; transform-origin: center; transition: transform .45s ease; }
.ifl-lm-valve__rim-out { fill: none; stroke: #26343B; stroke-width: 5.6; }
.ifl-lm-valve__rim { fill: none; stroke: #C8372D; stroke-width: 3.2; }
.ifl-lm-valve__spokes { fill: none; stroke: #C8372D; stroke-width: 3; stroke-linecap: round; }
.ifl-lm-valve__hub { fill: #26343B; }
.ifl-lm-valve.is-off .ifl-lm-valve__wheel { transform: rotate(90deg); }
.ifl-lm-valve.is-off .ifl-lm-valve__rim, .ifl-lm-valve.is-off .ifl-lm-valve__spokes { stroke: #7C868B; }
@media (hover: hover) {
  .ifl-lm-valve:hover .ifl-lm-valve__wheel { transform: rotate(-30deg); }
  .ifl-lm-valve.is-off:hover .ifl-lm-valve__wheel { transform: rotate(60deg); }
}
.ifl-dock .ifl-lm-valve:focus-visible { outline: 3px solid #FFD166; outline-offset: 1px; }
.ifl-dock.is-lm-paused .ifl-lm-valve { visibility: hidden; }

@media (max-width: 1279px) {
  .ifl-lm-leak__target { left: 15px; top: 2px; width: 14px; height: 10px; }
  .ifl-lm-leak.is-spray .ifl-lm-leak__target { top: -18px; }
  .ifl-lm-jet { left: 22px; bottom: 8px; width: 5px; height: 34px; margin-left: -2.5px; }
  .ifl-lm-jet--l, .ifl-lm-jet--r { width: 4px; height: 27px; margin-left: -2px; }
  .ifl-lm-sp { left: 18px; top: -8px; width: 7px; height: 9px; }
  .ifl-lm-fling { width: 5px; height: 7px; }
  .ifl-dock button.ifl-lm-valve, .ifl-dock button.ifl-lm-valve:hover, .ifl-dock button.ifl-lm-valve:focus, .ifl-dock button.ifl-lm-valve:active { right: 6px; bottom: 100%; width: 32px; height: 32px; }
  .ifl-lm-valve svg { width: 27px; height: 27px; }
}

@keyframes ifl-lm-sa { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-11px, -26px) scale(1); opacity: 0; } }
@keyframes ifl-lm-sb { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(1px, -34px) scale(1); opacity: 0; } }
@keyframes ifl-lm-sc { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(12px, -24px) scale(1); opacity: 0; } }
@keyframes ifl-lm-drip { 0% { transform: translateY(0) scale(.3); opacity: 0; } 35% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(14px) scale(.9); opacity: 0; } }
@keyframes ifl-lm-ring { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ifl-lm-pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ifl-lm-plant { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes ifl-lm-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ifl-lm-bigdrip { 0% { transform: translateY(-6px) scale(.6); opacity: 0; } 30% { opacity: 1; } 60% { transform: translateY(0) scale(1); } 100% { transform: translateY(12px) scale(1); opacity: 0; } }
@keyframes ifl-lm-bob { 0% { transform: translateY(-2px); } 100% { transform: translateY(3px); } }
@keyframes ifl-lm-jet { 0% { transform: scaleY(.72) skewX(-12deg); } 100% { transform: scaleY(1.08) skewX(12deg); } }
@keyframes ifl-lm-jetl { 0% { transform: rotate(-24deg) scaleY(.75); } 100% { transform: rotate(-36deg) scaleY(1.05); } }
@keyframes ifl-lm-jetr { 0% { transform: rotate(24deg) scaleY(.75); } 100% { transform: rotate(36deg) scaleY(1.05); } }
@keyframes ifl-lm-jetoff { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes ifl-lm-spray { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 40% { transform: translate(calc(var(--dx) * .5), -10px) scale(1); } 100% { transform: translate(var(--dx), var(--dy)) scale(.8); opacity: 0; } }
@keyframes ifl-lm-fling { 0% { transform: translate(0, 0); opacity: 1; } 60% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 22px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ifl-lm-leak__ring, .ifl-lm-drop, .ifl-lm-zoom__drop, .ifl-lm-jet, .ifl-lm-sp, .ifl-lm-leak__target { animation: none; }
}